Hat Graduation Add icon
Used to represent graduating school. The Hat Graduation Add icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Hat Graduation Add 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 { HatGraduationAdd24Regular, HatGraduationAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <HatGraduationAdd24Regular aria-label="Hat Graduation Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_hat_graduation_add_24_regular.svg" width="24" height="24" alt="Hat Graduation Add"> 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="M23 6.5C23 3.46243 20.5376 1 17.5 1C14.4624 1 12 3.46243 12 6.5C12 9.53757 14.4624 12 17.5 12C20.5376 12 23 9.53757 23 6.5ZM18.0006 7.00001L18.0011 9.50352C18.0011 9.77966 17.7773 10.0035 17.5011 10.0035C17.225 10.0035 17.0011 9.77966 17.0011 9.50352L17.0006 7.00001H14.4956C14.2197 7.00001 13.9961 6.77615 13.9961 6.50001C13.9961 6.22387 14.2197 6.00001 14.4956 6.00001H17.0005L17 3.49927C17 3.22313 17.2239 2.99927 17.5 2.99927C17.7761 2.99927 18 3.22313 18 3.49927L18.0005 6.00001H20.4966C20.7725 6.00001 20.9961 6.22387 20.9961 6.50001C20.9961 6.77615 20.7725 7.00001 20.4966 7.00001H18.0006ZM17.5 13C18.0163 13 18.5185 12.9398 19 12.8261V17.75C19 17.9123 18.9474 18.0702 18.85 18.2L18.8489 18.2014L18.8477 18.2031L18.8446 18.2071L18.8364 18.2178L18.8209 18.2373L18.8111 18.2495C18.7904 18.2752 18.7619 18.3095 18.7253 18.3513C18.6522 18.4348 18.5469 18.5483 18.4081 18.6816C18.1305 18.9481 17.7176 19.2948 17.1587 19.6387C16.0359 20.3297 14.3387 21 12 21C9.66127 21 7.96408 20.3297 6.8413 19.6387C6.2824 19.2948 5.86951 18.9481 5.59193 18.6816C5.45308 18.5483 5.34778 18.4348 5.27468 18.3513C5.23204 18.3026 5.1901 18.2531 5.15107 18.2014L5.15 18.2C5.05263 18.0702 5 17.9123 5 17.75V12.1926L3 10.8859V16.25C3 16.6642 2.66421 17 2.25 17C1.83579 17 1.5 16.6642 1.5 16.25V9.49998C1.5 9.2295 1.64318 8.99247 1.85788 8.86053L9.90878 3.69965C10.5364 3.29734 11.2511 3.09315 11.967 3.08707C11.6583 3.58657 11.4153 4.13102 11.2501 4.70834C11.0655 4.76975 10.8868 4.85446 10.7183 4.96247L3.63041 9.50601L10.701 14.1254C11.4902 14.6411 12.5098 14.6411 13.299 14.1254L15.501 12.6868C16.1308 12.8902 16.8025 13 17.5 13ZM14.1194 15.3812C12.8317 16.2225 11.1683 16.2225 9.88058 15.3812L6.5 13.1726V17.4687C6.5368 17.5072 6.58034 17.5512 6.63073 17.5996C6.84143 17.8018 7.17072 18.0802 7.62745 18.3612C8.53592 18.9203 9.96373 19.5 12 19.5C14.0363 19.5 15.4641 18.9203 16.3726 18.3612C16.8293 18.0802 17.1586 17.8018 17.3693 17.5996C17.4197 17.5512 17.4632 17.5072 17.5 17.4687V13.1726L14.1194 15.3812Z" 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_add_24_regular.svg";Details
| Name | Hat Graduation Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_hat_graduation_add_24_regular.svg |
| Filled file | ic_fluent_hat_graduation_add_24_filled.svg |
| React components | HatGraduationAdd24Regular, HatGraduationAdd24Filled |
| License | MIT (© Microsoft Corporation) |