Heart icon
A hand-drawn heart icon that animates on its own: an SVG on a 24px grid in thin, regular and bold strokes. Free to download and use in the apps you build (LumioUI License). It takes your text colour through currentColor.
- Category
- Social
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
heart
Stroke weights and sizes
Use it in React Native
The Icon component draws heart by name, sized and coloured from your theme. Add it with npx @lumioui/cli add icon.
TSX Example.tsx
import { Icon } from "@/components/ui/icon";
<Icon name="heart" size={24} />
// colour and stroke follow your theme; pass color / strokeWidth to overrideSVG code
The still glyph. The animated version, linked above, plays its motion on its own with SMIL, so it needs no script.
SVG heart.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g><path stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="currentColor" d="M12 19.8S4.6 14.9 3.6 10.4C2.8 6.9 5.2 4.6 7.7 4.6C9.5 4.6 11.1 5.6 12 7C12.9 5.6 14.5 4.6 16.3 4.6C18.8 4.6 21.2 6.9 20.4 10.4C19.4 14.9 12 19.8 12 19.8Z" opacity="0"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M12 19.8S4.6 14.9 3.6 10.4C2.8 6.9 5.2 4.6 7.7 4.6C9.5 4.6 11.1 5.6 12 7C12.9 5.6 14.5 4.6 16.3 4.6C18.8 4.6 21.2 6.9 20.4 10.4C19.4 14.9 12 19.8 12 19.8Z"></path></g></svg>On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/heart.svg" width="24" height="24" alt="Heart" />Where LumioUI uses it
- Carousel component
- Context Menu component
- Notification Item component
- Product Card component
- Property Card component
- Save Button component
- Action Bar component
- App Bar component
- Choice Card component
- Expandable Control component
- Grid component
- Image component
- Signup Chat screen
- Notification Settings screen
- Saved Items screen
- Search Visual screen
- Discover screen
- Matches screen
- Profile Detail screen
- Product Grid screen
- Search Results screen
- Store Home screen
- Event Hero screen
- Events Discover screen
