graduation cap icon
graduation-cap-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- graduation-cap-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
graduation-capEmoji One (Colored)graduation-capFont Awesome 6 Solidgraduation-capFont Awesome Solidgraduation-cap-outlineFlowbite Iconsgraduation-capFluent Emojigraduation-capFluent Emoji Flatgraduation-capFluent Emoji High Contrastgraduation-capHuge Iconsgraduation-capIconoirgraduation-capLine Awesomegraduation-capLucidegraduation-capMyna UI Iconsgraduation-capNoto Emojigraduation-capOpenMojigraduation-capPrime Iconsgraduation-cap-fillRemix Icongraduation-capStreamline Emojisgraduation-capTwitter Emojigraduation-capUnicons
Use the graduation cap icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249.8 85.49l-116-64a12 12 0 0 0-11.6 0l-116 64a12 12 0 0 0 0 21l21.8 12v47.76a19.9 19.9 0 0 0 5.09 13.32C46.63 194.7 77 220 128 220a136.9 136.9 0 0 0 40-5.75V240a12 12 0 0 0 24 0v-35.88a119.5 119.5 0 0 0 30.91-24.51a19.9 19.9 0 0 0 5.09-13.32v-47.76l21.8-12a12 12 0 0 0 0-21ZM128 45.71L219.16 96L186 114.3a2 2 0 0 1-.18-.12l-52-28.69a12 12 0 0 0-11.6 21l39 21.49L128 146.3L36.84 96ZM128 196c-40.42 0-64.65-19.07-76-31.27v-33l70.2 38.74a12 12 0 0 0 11.6 0l34.2-18.83v37.23a110.5 110.5 0 0 1-40 7.13m76-31.27a93 93 0 0 1-12 10.81v-37.15l12-6.62Z"/></svg>
React
import type { SVGProps } from "react";
export function PhGraduationCapBold(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249.8 85.49l-116-64a12 12 0 0 0-11.6 0l-116 64a12 12 0 0 0 0 21l21.8 12v47.76a19.9 19.9 0 0 0 5.09 13.32C46.63 194.7 77 220 128 220a136.9 136.9 0 0 0 40-5.75V240a12 12 0 0 0 24 0v-35.88a119.5 119.5 0 0 0 30.91-24.51a19.9 19.9 0 0 0 5.09-13.32v-47.76l21.8-12a12 12 0 0 0 0-21ZM128 45.71L219.16 96L186 114.3a2 2 0 0 1-.18-.12l-52-28.69a12 12 0 0 0-11.6 21l39 21.49L128 146.3L36.84 96ZM128 196c-40.42 0-64.65-19.07-76-31.27v-33l70.2 38.74a12 12 0 0 0 11.6 0l34.2-18.83v37.23a110.5 110.5 0 0 1-40 7.13m76-31.27a93 93 0 0 1-12 10.81v-37.15l12-6.62Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249.8 85.49l-116-64a12 12 0 0 0-11.6 0l-116 64a12 12 0 0 0 0 21l21.8 12v47.76a19.9 19.9 0 0 0 5.09 13.32C46.63 194.7 77 220 128 220a136.9 136.9 0 0 0 40-5.75V240a12 12 0 0 0 24 0v-35.88a119.5 119.5 0 0 0 30.91-24.51a19.9 19.9 0 0 0 5.09-13.32v-47.76l21.8-12a12 12 0 0 0 0-21ZM128 45.71L219.16 96L186 114.3a2 2 0 0 1-.18-.12l-52-28.69a12 12 0 0 0-11.6 21l39 21.49L128 146.3L36.84 96ZM128 196c-40.42 0-64.65-19.07-76-31.27v-33l70.2 38.74a12 12 0 0 0 11.6 0l34.2-18.83v37.23a110.5 110.5 0 0 1-40 7.13m76-31.27a93 93 0 0 1-12 10.81v-37.15l12-6.62Z"/></svg> </template>
CSS
.icon-graduation-cap-bold {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m249.8%2085.49l-116-64a12%2012%200%200%200-11.6%200l-116%2064a12%2012%200%200%200%200%2021l21.8%2012v47.76a19.9%2019.9%200%200%200%205.09%2013.32C46.63%20194.7%2077%20220%20128%20220a136.9%20136.9%200%200%200%2040-5.75V240a12%2012%200%200%200%2024%200v-35.88a119.5%20119.5%200%200%200%2030.91-24.51a19.9%2019.9%200%200%200%205.09-13.32v-47.76l21.8-12a12%2012%200%200%200%200-21ZM128%2045.71L219.16%2096L186%20114.3a2%202%200%200%201-.18-.12l-52-28.69a12%2012%200%200%200-11.6%2021l39%2021.49L128%20146.3L36.84%2096ZM128%20196c-40.42%200-64.65-19.07-76-31.27v-33l70.2%2038.74a12%2012%200%200%200%2011.6%200l34.2-18.83v37.23a110.5%20110.5%200%200%201-40%207.13m76-31.27a93%2093%200%200%201-12%2010.81v-37.15l12-6.62Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m249.8%2085.49l-116-64a12%2012%200%200%200-11.6%200l-116%2064a12%2012%200%200%200%200%2021l21.8%2012v47.76a19.9%2019.9%200%200%200%205.09%2013.32C46.63%20194.7%2077%20220%20128%20220a136.9%20136.9%200%200%200%2040-5.75V240a12%2012%200%200%200%2024%200v-35.88a119.5%20119.5%200%200%200%2030.91-24.51a19.9%2019.9%200%200%200%205.09-13.32v-47.76l21.8-12a12%2012%200%200%200%200-21ZM128%2045.71L219.16%2096L186%20114.3a2%202%200%200%201-.18-.12l-52-28.69a12%2012%200%200%200-11.6%2021l39%2021.49L128%20146.3L36.84%2096ZM128%20196c-40.42%200-64.65-19.07-76-31.27v-33l70.2%2038.74a12%2012%200%200%200%2011.6%200l34.2-18.83v37.23a110.5%20110.5%200%200%201-40%207.13m76-31.27a93%2093%200%200%201-12%2010.81v-37.15l12-6.62Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/graduation-cap-bold.svg?color=%231a73e8&size=48
