Hover the icon or press Play. Suggested motion: beat. Pick another to preview it and update the animated code:
Templar Heart icon
A free templar heart 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/templar-heart.jsonimport * as React from "react";
/**
* Templar Heart from Game Icons (https://game-icons.net/), CC BY 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/game-icons/templar-heart. Sized in em, colored by currentColor.
*/
export function GiTemplarHeartIcon(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="M332.893 24.46c-28.788.09-58.326 13.893-78.948 43.06-25.802-33.94-66.387-47.043-101.986-40.067-39.714 7.782-73.4 41.826-72.13 94.83 1.203 50.248 35.647 83.413 71.764 115.047 21.513 18.843 43.86 37.513 62.06 59.25 11.54 23.798 18.216 49.248 20.576 74.943-29.393-2.8-57.648-11.638-84.19-26.353v91.902c26.518-14.695 54.958-23.64 84.19-26.345-2.71 29.228-11.014 58.316-25.707 84.83h91.9c-14.574-26.624-23.46-55.476-26.347-84.83 29.233 2.708 58.317 11.65 84.83 26.345V345.17c-26.478 14.497-55.636 23.412-84.83 26.353 2.536-27.582 10.353-54.176 23.383-79.293 18.175-19.046 39.397-35.617 59.667-52.552 18.543-15.493 36.226-31.296 49.39-50.176 13.166-18.88 21.6-41.106 20.977-67.66-1.167-49.86-33.55-84.978-72.29-94.674-7.265-1.818-14.76-2.73-22.31-2.707zm-.018 18.55c1.894.016 3.783.113 5.666.273-23.313 7.815-40.118 29.82-40.118 55.764 0 32.483 26.333 58.816 58.816 58.816 22.212 0 41.544-12.317 51.55-30.49-.527 20.08-7.037 36.29-17.6 51.44-11.444 16.41-27.843 31.317-46.043 46.523-31.857 26.616-69.413 54.153-92.62 95.404-21.54-41.422-57.462-70.18-88.62-97.47-35.664-31.237-64.39-59.52-65.393-101.434-1.084-45.253 25.016-69.768 57.04-76.043 6.41-1.256 13.045-1.713 19.727-1.37-21.685 8.664-37.01 29.848-37.01 54.624 0 32.483 26.333 58.816 58.816 58.816 31.712 0 57.55-25.1 58.758-56.517l6.582-12.23C278.688 58.9 302.762 45 326.856 43.207c2.007-.148 4.015-.213 6.02-.196z"
/>
</svg>
);
}import { GiTemplarHeart } from "react-icons/gi";
export function Example() {
return <GiTemplarHeart 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="M332.893 24.46c-28.788.09-58.326 13.893-78.948 43.06-25.802-33.94-66.387-47.043-101.986-40.067-39.714 7.782-73.4 41.826-72.13 94.83 1.203 50.248 35.647 83.413 71.764 115.047 21.513 18.843 43.86 37.513 62.06 59.25 11.54 23.798 18.216 49.248 20.576 74.943-29.393-2.8-57.648-11.638-84.19-26.353v91.902c26.518-14.695 54.958-23.64 84.19-26.345-2.71 29.228-11.014 58.316-25.707 84.83h91.9c-14.574-26.624-23.46-55.476-26.347-84.83 29.233 2.708 58.317 11.65 84.83 26.345V345.17c-26.478 14.497-55.636 23.412-84.83 26.353 2.536-27.582 10.353-54.176 23.383-79.293 18.175-19.046 39.397-35.617 59.667-52.552 18.543-15.493 36.226-31.296 49.39-50.176 13.166-18.88 21.6-41.106 20.977-67.66-1.167-49.86-33.55-84.978-72.29-94.674-7.265-1.818-14.76-2.73-22.31-2.707zm-.018 18.55c1.894.016 3.783.113 5.666.273-23.313 7.815-40.118 29.82-40.118 55.764 0 32.483 26.333 58.816 58.816 58.816 22.212 0 41.544-12.317 51.55-30.49-.527 20.08-7.037 36.29-17.6 51.44-11.444 16.41-27.843 31.317-46.043 46.523-31.857 26.616-69.413 54.153-92.62 95.404-21.54-41.422-57.462-70.18-88.62-97.47-35.664-31.237-64.39-59.52-65.393-101.434-1.084-45.253 25.016-69.768 57.04-76.043 6.41-1.256 13.045-1.713 19.727-1.37-21.685 8.664-37.01 29.848-37.01 54.624 0 32.483 26.333 58.816 58.816 58.816 31.712 0 57.55-25.1 58.758-56.517l6.582-12.23C278.688 58.9 302.762 45 326.856 43.207c2.007-.148 4.015-.213 6.02-.196z"
/>
</svg>"Templar Heart" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.