Hat Graduation icon

Use the Hat Graduation icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { HatGraduation24Regular, HatGraduation24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HatGraduation24Regular aria-label="Hat Graduation" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hat_graduation_24_regular.svg" width="24" height="24" alt="Hat Graduation">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.90878 3.70062C11.1832 2.88365 12.8168 2.88365 14.0912 3.70062L22.1548 8.86959C22.3689 9.00687 22.4989 9.24336 22.5 9.49775C22.5011 9.75213 22.3732 9.98974 22.1602 10.1289L19 12.1935V17.7509C19 17.9132 18.9474 18.0711 18.85 18.2009L18.8489 18.2024L18.8477 18.204L18.8446 18.208L18.8364 18.2187C18.8321 18.2242 18.8269 18.2308 18.8209 18.2383C18.8179 18.2421 18.8146 18.2462 18.8111 18.2505C18.7904 18.2761 18.7619 18.3105 18.7253 18.3522C18.6522 18.4358 18.5469 18.5493 18.4081 18.6826C18.1305 18.9491 17.7176 19.2958 17.1587 19.6397C16.0359 20.3306 14.3387 21.0009 12 21.0009C9.66127 21.0009 7.96408 20.3306 6.8413 19.6397C6.2824 19.2958 5.86951 18.9491 5.59193 18.6826C5.45308 18.5493 5.34778 18.4358 5.27468 18.3522C5.23204 18.3035 5.1901 18.2541 5.15107 18.2024C5.14956 18.2004 5.15 18.2009 5.15 18.2009C5.05263 18.0711 5 17.9132 5 17.7509V12.1935L3 10.8869V16.2509C3 16.6652 2.66421 17.0009 2.25 17.0009C1.83579 17.0009 1.5 16.6652 1.5 16.2509V9.50095C1.5 9.23047 1.64318 8.99343 1.85788 8.8615L9.90878 3.70062ZM14.1194 15.3822C12.8317 16.2235 11.1683 16.2234 9.88058 15.3822L6.5 13.1735V17.4697C6.5368 17.5082 6.58034 17.5522 6.63073 17.6005C6.84143 17.8028 7.17072 18.0811 7.62745 18.3622C8.53592 18.9213 9.96373 19.5009 12 19.5009C14.0363 19.5009 15.4641 18.9213 16.3726 18.3622C16.8293 18.0811 17.1586 17.8028 17.3693 17.6005C17.4197 17.5522 17.4632 17.5082 17.5 17.4697V13.1735L14.1194 15.3822ZM13.2817 4.96343C12.5006 4.46271 11.4994 4.46271 10.7183 4.96343L3.63041 9.50698L10.701 14.1264C11.4902 14.642 12.5098 14.642 13.299 14.1264L20.3696 9.50698L13.2817 4.96343Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/hat_graduation_24_regular.svg";

Details

Keywords

celebrationeventschoolknowledge