Hover the icon or press Play. Suggested motion: beat. Pick another to preview it and update the animated code:
Heart Bottle icon
A free heart bottle 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/heart-bottle.jsonimport * as React from "react";
/**
* Heart Bottle from Game Icons (https://game-icons.net/), CC BY 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/game-icons/heart-bottle. Sized in em, colored by currentColor.
*/
export function GiHeartBottleIcon(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="M252.875 24.25l-11.53 42.906 141.218 37.875 11.5-42.905L252.875 24.25zm.78 65.563l-6.843 25.468-18.375-4.936c-42.78-11.464-87.073 13.496-98.562 56.375L80 352.843c-11.49 42.88 14.12 87.232 57 98.72l143.438 38.436c42.88 11.49 86.63-14.376 98.093-57.156l49.876-186.156c11.462-42.78-13.752-86.44-56.53-97.907v-.03l-19.032-5.094 6.812-25.437-18.03-4.845-9.25 34.5-2.407 9 .124.03c-9.833 28.888 56.393 96.208 82.312 64.69.418 6.612-.198 13.437-2.03 20.28l-2.75 10.22h-45.72c9.88 13.787 13.913 32.493 7.656 53.155-9.313 30.756-36.22 45.28-62.687 58.125-26.467 12.846-53.43 24.8-70.28 47.97L222.687 430.5 219.78 407c-3.545-28.56-21.868-51.723-38.78-75.813-8.456-12.044-16.508-24.29-21.406-37.968-4.487-12.53-6.085-26.434-2.563-41.126h-30.686l21.594-80.563c8.87-33.105 42.48-52.054 75.687-43.155l27.406 7.344 9 2.436 2.44-9.03 9.25-34.47-18.064-4.844zM217.47 220.188c-17.402.35-34.707 10.976-41.44 33.25-3.707 12.27-2.716 22.65 1.157 33.468 3.874 10.817 10.928 21.855 19.125 33.53 13.337 18.998 29.728 39.8 37.782 65.69 19.37-18.71 43.527-29.34 64.594-39.563 25.93-12.587 46.112-23.974 53-46.72 7.507-24.79-2.893-40.962-19.344-49-16.45-8.037-39.098-6.47-56.156 10.5l-11.907 11.844-3.81-16.375c-5.908-25.504-23.357-36.304-41.314-36.625-.56-.01-1.126-.01-1.687 0z"
/>
</svg>
);
}import { GiHeartBottle } from "react-icons/gi";
export function Example() {
return <GiHeartBottle 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="M252.875 24.25l-11.53 42.906 141.218 37.875 11.5-42.905L252.875 24.25zm.78 65.563l-6.843 25.468-18.375-4.936c-42.78-11.464-87.073 13.496-98.562 56.375L80 352.843c-11.49 42.88 14.12 87.232 57 98.72l143.438 38.436c42.88 11.49 86.63-14.376 98.093-57.156l49.876-186.156c11.462-42.78-13.752-86.44-56.53-97.907v-.03l-19.032-5.094 6.812-25.437-18.03-4.845-9.25 34.5-2.407 9 .124.03c-9.833 28.888 56.393 96.208 82.312 64.69.418 6.612-.198 13.437-2.03 20.28l-2.75 10.22h-45.72c9.88 13.787 13.913 32.493 7.656 53.155-9.313 30.756-36.22 45.28-62.687 58.125-26.467 12.846-53.43 24.8-70.28 47.97L222.687 430.5 219.78 407c-3.545-28.56-21.868-51.723-38.78-75.813-8.456-12.044-16.508-24.29-21.406-37.968-4.487-12.53-6.085-26.434-2.563-41.126h-30.686l21.594-80.563c8.87-33.105 42.48-52.054 75.687-43.155l27.406 7.344 9 2.436 2.44-9.03 9.25-34.47-18.064-4.844zM217.47 220.188c-17.402.35-34.707 10.976-41.44 33.25-3.707 12.27-2.716 22.65 1.157 33.468 3.874 10.817 10.928 21.855 19.125 33.53 13.337 18.998 29.728 39.8 37.782 65.69 19.37-18.71 43.527-29.34 64.594-39.563 25.93-12.587 46.112-23.974 53-46.72 7.507-24.79-2.893-40.962-19.344-49-16.45-8.037-39.098-6.47-56.156 10.5l-11.907 11.844-3.81-16.375c-5.908-25.504-23.357-36.304-41.314-36.625-.56-.01-1.126-.01-1.687 0z"
/>
</svg>"Heart Bottle" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.