Home/Libraries/Line Awesome (Iconify)/graduation-cap

Line Awesome (Iconify)

GraduationCap

License: Apache-2.0Commercial Safe

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 32 32"><path fill="#818cf8" d="m16 4.875l-.469.25l-13.5 7L.312 13L2 13.844v8.437c-.598.348-1 .98-1 1.719a1.999 1.999 0 1 0 4 0c0-.738-.402-1.371-1-1.719v-7.406l2 1.031V21c0 .441.203.84.438 1.094s.519.406.812.562c.59.309 1.29.528 2.156.719c1.735.387 4.047.625 6.594.625s4.86-.238 6.594-.625c.867-.191 1.566-.41 2.156-.719c.293-.156.578-.308.813-.562A1.66 1.66 0 0 0 26 21v-5.094l3.969-2.031L31.687 13l-1.718-.875l-13.5-7zm0 2.25L27.313 13l-1.782.906a3 3 0 0 0-.781-.562c-.586-.309-1.29-.528-2.156-.719C20.864 12.238 18.559 12 16 12s-4.863.238-6.594.625c-.867.191-1.57.41-2.156.719a3 3 0 0 0-.781.562L4.687 13zM16 14c2.441 0 4.637.223 6.156.563c.758.167 1.367.363 1.688.53c.101.055.117.095.156.126v3.812a11 11 0 0 0-1.406-.406C20.859 18.238 18.547 18 16 18s-4.86.238-6.594.625c-.531.117-.988.254-1.406.406V15.22c.04-.031.055-.07.156-.125c.32-.168.93-.364 1.688-.531C11.364 14.223 13.559 14 16 14m0 6c2.426 0 4.633.223 6.156.563a7 7 0 0 1 1.375.437a7 7 0 0 1-1.375.438c-1.523.34-3.73.562-6.156.562s-4.633-.223-6.156-.563A7 7 0 0 1 8.469 21a7 7 0 0 1 1.375-.438C11.367 20.223 13.574 20 16 20"/></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. GraduationCapIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

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