Hover the icon or press Play. Suggested motion: beat. Pick another to preview it and update the animated code:
Heart Broken icon
A free heart broken icon from Themify 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
- MIT license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/themify/heart-broken.jsonimport * as React from "react";
/**
* Heart Broken from Themify Icons (https://github.com/lykmapipo/themify-icons), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/themify/heart-broken. Sized in em, colored by currentColor.
*/
export function TfiHeartBrokenIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
version="1.1"
viewBox="0 0 17 17"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g />
<path
d="M0.153 6.276c-0.105-0.419-0.153-0.775-0.153-1.118 0-2.481 2.019-4.5 4.5-4.5 1.739 0 3.251 0.992 4 2.439 0.749-1.447 2.261-2.439 4-2.439 2.481 0 4.5 2.019 4.5 4.5 0 0.342-0.047 0.688-0.147 1.091l-0.113 0.368c-0.081 0.331-0.228 0.721-0.453 1.199l-0.904-0.426c0.196-0.418 0.322-0.749 0.395-1.041l0.112-0.369c0.073-0.295 0.11-0.564 0.11-0.822 0-1.93-1.57-3.5-3.5-3.5s-3.5 1.571-3.5 3.5h-1c0-1.93-1.57-3.5-3.5-3.5s-3.5 1.571-3.5 3.5c0 0.259 0.038 0.536 0.116 0.847l0.1 0.316c0.094 0.287 0.235 0.618 0.441 1.033l-0.896 0.446c-0.228-0.46-0.386-0.833-0.498-1.173l-0.11-0.351zM8.499 15.211c-0.806-0.633-3.102-2.533-4.976-5.013l-0.797 0.604c2.394 3.167 5.354 5.352 5.478 5.443l0.298 0.218 0.296-0.22c0.129-0.095 3.187-2.374 5.536-5.438l-0.793-0.609c-1.848 2.409-4.219 4.366-5.042 5.015zM14.172 7.415l-2.832 2-2.832-2-2.833 2-2.837-1.999-3.126 2.202 0.576 0.818 2.55-1.798 2.837 2.001 2.833-2 2.832 2 2.832-2 2.539 1.796 0.578-0.816-3.117-2.204z"
/>
</svg>
);
}import { TfiHeartBroken } from "react-icons/tfi";
export function Example() {
return <TfiHeartBroken className="size-5" />;
}<svg
version="1.1"
viewBox="0 0 17 17"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g />
<path
d="M0.153 6.276c-0.105-0.419-0.153-0.775-0.153-1.118 0-2.481 2.019-4.5 4.5-4.5 1.739 0 3.251 0.992 4 2.439 0.749-1.447 2.261-2.439 4-2.439 2.481 0 4.5 2.019 4.5 4.5 0 0.342-0.047 0.688-0.147 1.091l-0.113 0.368c-0.081 0.331-0.228 0.721-0.453 1.199l-0.904-0.426c0.196-0.418 0.322-0.749 0.395-1.041l0.112-0.369c0.073-0.295 0.11-0.564 0.11-0.822 0-1.93-1.57-3.5-3.5-3.5s-3.5 1.571-3.5 3.5h-1c0-1.93-1.57-3.5-3.5-3.5s-3.5 1.571-3.5 3.5c0 0.259 0.038 0.536 0.116 0.847l0.1 0.316c0.094 0.287 0.235 0.618 0.441 1.033l-0.896 0.446c-0.228-0.46-0.386-0.833-0.498-1.173l-0.11-0.351zM8.499 15.211c-0.806-0.633-3.102-2.533-4.976-5.013l-0.797 0.604c2.394 3.167 5.354 5.352 5.478 5.443l0.298 0.218 0.296-0.22c0.129-0.095 3.187-2.374 5.536-5.438l-0.793-0.609c-1.848 2.409-4.219 4.366-5.042 5.015zM14.172 7.415l-2.832 2-2.832-2-2.833 2-2.837-1.999-3.126 2.202 0.576 0.818 2.55-1.798 2.837 2.001 2.833-2 2.832 2 2.832-2 2.539 1.796 0.578-0.816-3.117-2.204z"
/>
</svg>"Heart Broken" icon from Themify Icons (https://github.com/lykmapipo/themify-icons), licensed under MIT license.