Home/Libraries/Font Awesome 4 (Iconify)/leaf

Font Awesome 4 (Iconify)

Leaf

License: OFL-1.1

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 1792 1408"><path fill="#818cf8" d="M1280 576q0-26-19-45t-45-19q-172 0-318 49.5t-259.5 134T403 915q-19 21-19 45q0 26 19 45t45 19q24 0 45-19q27-24 74-71t67-66q137-124 268.5-176t313.5-52q26 0 45-19t19-45m512-198q0 95-20 193q-46 224-184.5 383T1230 1222q-214 108-438 108q-148 0-286-47q-15-5-88-42t-96-37q-16 0-39.5 32t-45 70t-52.5 70t-60 32q-43 0-63.5-17.5T16 1331q-2-4-6-11t-5.5-10t-3-9.5T0 1287q0-35 31-73.5t68-65.5t68-56t31-48q0-4-14-38t-16-44q-9-51-9-104q0-115 43.5-220t119-184.5t170.5-139T696 219q55-18 145-25.5t179.5-9t178.5-6t163.5-24T1476 98l29.5-29.5l29.5-28l27-20l36.5-16L1642 0q39 0 70.5 46t47.5 112t24 124t8 96"/></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. LeafIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **OFL-1.1** 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.