Hand Heart Bold icon

solar:hand-heart-bold

The Hand Heart Bold icon (solar:hand-heart-bold) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: Hands
Tags: handheart, heartbold, handheartbold

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M7 4.82936C7 6.37714 8.72593 8.00761 10.1497 9.08932C10.9489 9.69644 11.3484 10 12 10C12.6516 10 13.0512 9.69644 13.8503 9.08933C15.2741 8.00763 17 6.37717 17 4.82935C17 2.03918 14.2499 0.997463 12 3.15285C9.75008 0.997463 7 2.03918 7 4.82936Z"/><path d="M6.25993 21.3884H6C5.05719 21.3884 4.58579 21.3884 4.29289 21.0955C4 20.8026 4 20.3312 4 19.3884V18.2764C4 17.7579 4 17.4987 4.13318 17.2672C4.26636 17.0356 4.46727 16.9188 4.8691 16.6851C7.51457 15.1464 11.2715 14.2803 13.7791 15.7759C13.9475 15.8764 14.0991 15.9977 14.2285 16.1431C14.7866 16.77 14.746 17.7161 14.1028 18.2775C13.9669 18.396 13.8222 18.486 13.6764 18.5172C13.7962 18.5033 13.911 18.4874 14.0206 18.4699C14.932 18.3245 15.697 17.8375 16.3974 17.3084L18.2046 15.9433C18.8417 15.462 19.7873 15.4619 20.4245 15.943C20.9982 16.3762 21.1736 17.0894 20.8109 17.6707C20.388 18.3487 19.7921 19.216 19.2199 19.7459C18.6469 20.2766 17.7939 20.7504 17.0975 21.0865C16.326 21.4589 15.4738 21.6734 14.6069 21.8138C12.8488 22.0983 11.0166 22.0549 9.27633 21.6964C8.29253 21.4937 7.27079 21.3884 6.25993 21.3884Z"/></g></svg>

How to use the Hand Heart Bold icon

React

import { Icon } from "@iconify/react";

<Icon icon="solar:hand-heart-bold" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="solar:hand-heart-bold" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="solar:hand-heart-bold" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--hand-heart-bold]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:hand-heart-bold"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="solar:hand-heart-bold"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/hand-heart-bold.svg" alt="Hand Heart Bold icon" width="24" height="24">

Related icons in Solar

Hand Heart Bold icon in other icon sets

Hand Heart Bold icon FAQ

Is the Hand Heart Bold icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Hand Heart Bold icon in React?

Install @iconify/react and render <Icon icon="solar:hand-heart-bold" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Hand Heart Bold icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/hand-heart-bold.svg" alt="Hand Heart Bold icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →