Home/Libraries/Basil (Iconify)/heart-outline

Basil (Iconify)

HeartOutline

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" fill-rule="evenodd" d="M3.25 10.03c0-2.7 2.37-4.78 5.15-4.78c1.433 0 2.695.672 3.6 1.542c.905-.87 2.166-1.542 3.6-1.542c2.78 0 5.15 2.08 5.15 4.78c0 1.85-.789 3.476-1.882 4.852c-1.09 1.372-2.518 2.537-3.884 3.484c-.523.362-1.05.695-1.534.941c-.453.231-.975.443-1.45.443s-.996-.212-1.45-.443a14 14 0 0 1-1.533-.941c-1.367-.947-2.794-2.112-3.885-3.484C4.039 13.506 3.25 11.88 3.25 10.03M8.4 6.75c-2.08 0-3.65 1.53-3.65 3.28c0 1.403.596 2.71 1.556 3.918c.962 1.21 2.257 2.279 3.565 3.185c.495.343.96.634 1.36.838c.428.218.676.279.769.279s.341-.061.77-.28a12 12 0 0 0 1.36-.837c1.307-.906 2.602-1.974 3.564-3.185c.96-1.208 1.556-2.515 1.556-3.918c0-1.75-1.57-3.28-3.65-3.28c-1.194 0-2.31.713-3.005 1.619a.75.75 0 0 1-1.19 0C10.71 7.463 9.595 6.75 8.4 6.75" clip-rule="evenodd"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. HeartOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.