Hover the icon or press Play. Suggested motion: beat. Pick another to preview it and update the animated code:
Nested Hearts icon
A free nested hearts icon from Game Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- CC BY 3.0 license
- Project
- game-icons.net
npx shadcn@latest add https://ui.cuelark.com/r/icons/game-icons/nested-hearts.jsonimport * as React from "react";
/**
* Nested Hearts from Game Icons (https://game-icons.net/), CC BY 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/game-icons/nested-hearts. Sized in em, colored by currentColor.
*/
export function GiNestedHeartsIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 512 512"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M147.887 25.734c-10.106-.02-20.148 1.213-29.89 3.647C66.04 42.366 22.312 89.155 20.212 156.36c-1.12 35.803 9.934 65.568 27.54 91.12 17.61 25.552 41.552 47.158 66.85 68.442 50.596 42.573 106.39 83.87 132.397 148.293l8.904 22.05 8.49-22.212c24.65-64.483 78.63-107.776 128.604-151.27 49.974-43.493 96.634-88.203 98.783-155.834 2.276-71.537-42.363-116.7-95.522-127.137-49-9.622-105.34 9.122-140.23 57.744-27.547-42.14-68.33-61.74-108.14-61.823zm2.168 17.975c38.356.402 73.808 24.73 93.14 56.956 3.06 4.91 12 18.78 12 18.78l7.334-10.35c16.673-26.633 42.103-48.728 72.284-58.325 40.247-13.228 90.467-2.59 117.055 32.314 24.617 32.027 27.77 76.852 14.025 113.666-17.43 43.71-53.837 75.718-88.553 105.793-46.72 39.376-94.345 81.183-121.916 136.86-5.064-9.63-10.672-18.98-16.9-27.9-40.44-59.624-104.682-96.256-153.725-147.608-33.198-30.908-52.584-77.653-45.26-123.08 5.82-52.31 53.85-97.206 106.794-97.07 1.243-.036 2.483-.05 3.72-.036zm64.457 123.925c-3.878-.008-7.732.466-11.47 1.4-19.938 4.983-36.72 22.938-37.524 48.73-.43 13.738 3.81 25.16 10.568 34.965 6.758 9.806 15.945 18.096 25.652 26.264 19.417 16.338 40.828 32.186 50.81 56.908l3.415 8.463 3.258-8.525c9.46-24.746 30.175-41.358 49.352-58.05 19.178-16.69 37.084-33.846 37.908-59.8.873-27.452-16.256-44.784-36.656-48.79-18.804-3.69-40.425 3.5-53.814 22.16-10.57-16.172-26.22-23.694-41.498-23.725z"
/>
</svg>
);
}import { GiNestedHearts } from "react-icons/gi";
export function Example() {
return <GiNestedHearts className="size-5" />;
}<svg
viewBox="0 0 512 512"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M147.887 25.734c-10.106-.02-20.148 1.213-29.89 3.647C66.04 42.366 22.312 89.155 20.212 156.36c-1.12 35.803 9.934 65.568 27.54 91.12 17.61 25.552 41.552 47.158 66.85 68.442 50.596 42.573 106.39 83.87 132.397 148.293l8.904 22.05 8.49-22.212c24.65-64.483 78.63-107.776 128.604-151.27 49.974-43.493 96.634-88.203 98.783-155.834 2.276-71.537-42.363-116.7-95.522-127.137-49-9.622-105.34 9.122-140.23 57.744-27.547-42.14-68.33-61.74-108.14-61.823zm2.168 17.975c38.356.402 73.808 24.73 93.14 56.956 3.06 4.91 12 18.78 12 18.78l7.334-10.35c16.673-26.633 42.103-48.728 72.284-58.325 40.247-13.228 90.467-2.59 117.055 32.314 24.617 32.027 27.77 76.852 14.025 113.666-17.43 43.71-53.837 75.718-88.553 105.793-46.72 39.376-94.345 81.183-121.916 136.86-5.064-9.63-10.672-18.98-16.9-27.9-40.44-59.624-104.682-96.256-153.725-147.608-33.198-30.908-52.584-77.653-45.26-123.08 5.82-52.31 53.85-97.206 106.794-97.07 1.243-.036 2.483-.05 3.72-.036zm64.457 123.925c-3.878-.008-7.732.466-11.47 1.4-19.938 4.983-36.72 22.938-37.524 48.73-.43 13.738 3.81 25.16 10.568 34.965 6.758 9.806 15.945 18.096 25.652 26.264 19.417 16.338 40.828 32.186 50.81 56.908l3.415 8.463 3.258-8.525c9.46-24.746 30.175-41.358 49.352-58.05 19.178-16.69 37.084-33.846 37.908-59.8.873-27.452-16.256-44.784-36.656-48.79-18.804-3.69-40.425 3.5-53.814 22.16-10.57-16.172-26.22-23.694-41.498-23.725z"
/>
</svg>"Nested Hearts" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.