graduation cap emoji
graduation-cap from Twitter Emoji by Twitter · Default · Objects · CC-BY-4.0 Attribution required.
- Name
- graduation-cap
- Set
- Twitter Emoji
- Style
- Default
- Category
- Objects
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji 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-capPhosphorgraduation-capPrime Iconsgraduation-cap-fillRemix Icongraduation-capStreamline Emojisgraduation-capUnicons
More objects icons from Twitter Emoji
Use the graduation cap emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M24 14H12s-5 6-5 10s11 11 11 11s11-7 11-11s-5-10-5-10"/><path fill="#292f33" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.902.704 2.377.704 3.278 0l14.722-11.495c.902-.704.902-1.856 0-2.56z"/><path fill="#394146" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.901.704 2.377.704 3.278 0l14.723-11.495c.901-.704.901-1.856 0-2.56z"/><path fill="#fcab40" d="M8 25s-2 2-2 3v6s0 2 2 2s2-2 2-2v-6c0-1-2-3-2-3"/><circle cx="8" cy="26" r="3" fill="#fdd888"/><path fill="#fcab40" d="M8.001 27a1 1 0 0 1-1-1v-3.958c-.042-.634.187-2.036 1.317-2.884l9.022-7.91a1 1 0 0 1 1.318 1.504l-9.08 7.958C8.974 21.166 9 21.982 9 21.99L9.002 26a1 1 0 0 1-1.001 1"/><circle cx="18" cy="13" r="3" fill="#31373d"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiGraduationCap(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M24 14H12s-5 6-5 10s11 11 11 11s11-7 11-11s-5-10-5-10"/><path fill="#292f33" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.902.704 2.377.704 3.278 0l14.722-11.495c.902-.704.902-1.856 0-2.56z"/><path fill="#394146" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.901.704 2.377.704 3.278 0l14.723-11.495c.901-.704.901-1.856 0-2.56z"/><path fill="#fcab40" d="M8 25s-2 2-2 3v6s0 2 2 2s2-2 2-2v-6c0-1-2-3-2-3"/><circle cx="8" cy="26" r="3" fill="#fdd888"/><path fill="#fcab40" d="M8.001 27a1 1 0 0 1-1-1v-3.958c-.042-.634.187-2.036 1.317-2.884l9.022-7.91a1 1 0 0 1 1.318 1.504l-9.08 7.958C8.974 21.166 9 21.982 9 21.99L9.002 26a1 1 0 0 1-1.001 1"/><circle cx="18" cy="13" r="3" fill="#31373d"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M24 14H12s-5 6-5 10s11 11 11 11s11-7 11-11s-5-10-5-10"/><path fill="#292f33" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.902.704 2.377.704 3.278 0l14.722-11.495c.902-.704.902-1.856 0-2.56z"/><path fill="#394146" d="M19.64 1.28c-.901-.704-2.377-.704-3.278 0L1.639 12.776c-.901.704-.901 1.856 0 2.56l14.722 11.495c.901.704 2.377.704 3.278 0l14.723-11.495c.901-.704.901-1.856 0-2.56z"/><path fill="#fcab40" d="M8 25s-2 2-2 3v6s0 2 2 2s2-2 2-2v-6c0-1-2-3-2-3"/><circle cx="8" cy="26" r="3" fill="#fdd888"/><path fill="#fcab40" d="M8.001 27a1 1 0 0 1-1-1v-3.958c-.042-.634.187-2.036 1.317-2.884l9.022-7.91a1 1 0 0 1 1.318 1.504l-9.08 7.958C8.974 21.166 9 21.982 9 21.99L9.002 26a1 1 0 0 1-1.001 1"/><circle cx="18" cy="13" r="3" fill="#31373d"/></svg> </template>
CSS
.icon-graduation-cap {
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%2036%2036%22%3E%3Cpath%20fill%3D%22%2331373d%22%20d%3D%22M24%2014H12s-5%206-5%2010s11%2011%2011%2011s11-7%2011-11s-5-10-5-10%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M19.64%201.28c-.901-.704-2.377-.704-3.278%200L1.639%2012.776c-.901.704-.901%201.856%200%202.56l14.722%2011.495c.902.704%202.377.704%203.278%200l14.722-11.495c.902-.704.902-1.856%200-2.56z%22%2F%3E%3Cpath%20fill%3D%22%23394146%22%20d%3D%22M19.64%201.28c-.901-.704-2.377-.704-3.278%200L1.639%2012.776c-.901.704-.901%201.856%200%202.56l14.722%2011.495c.901.704%202.377.704%203.278%200l14.723-11.495c.901-.704.901-1.856%200-2.56z%22%2F%3E%3Cpath%20fill%3D%22%23fcab40%22%20d%3D%22M8%2025s-2%202-2%203v6s0%202%202%202s2-2%202-2v-6c0-1-2-3-2-3%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%223%22%20fill%3D%22%23fdd888%22%2F%3E%3Cpath%20fill%3D%22%23fcab40%22%20d%3D%22M8.001%2027a1%201%200%200%201-1-1v-3.958c-.042-.634.187-2.036%201.317-2.884l9.022-7.91a1%201%200%200%201%201.318%201.504l-9.08%207.958C8.974%2021.166%209%2021.982%209%2021.99L9.002%2026a1%201%200%200%201-1.001%201%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2213%22%20r%3D%223%22%20fill%3D%22%2331373d%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%2036%2036%22%3E%3Cpath%20fill%3D%22%2331373d%22%20d%3D%22M24%2014H12s-5%206-5%2010s11%2011%2011%2011s11-7%2011-11s-5-10-5-10%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M19.64%201.28c-.901-.704-2.377-.704-3.278%200L1.639%2012.776c-.901.704-.901%201.856%200%202.56l14.722%2011.495c.902.704%202.377.704%203.278%200l14.722-11.495c.902-.704.902-1.856%200-2.56z%22%2F%3E%3Cpath%20fill%3D%22%23394146%22%20d%3D%22M19.64%201.28c-.901-.704-2.377-.704-3.278%200L1.639%2012.776c-.901.704-.901%201.856%200%202.56l14.722%2011.495c.901.704%202.377.704%203.278%200l14.723-11.495c.901-.704.901-1.856%200-2.56z%22%2F%3E%3Cpath%20fill%3D%22%23fcab40%22%20d%3D%22M8%2025s-2%202-2%203v6s0%202%202%202s2-2%202-2v-6c0-1-2-3-2-3%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%223%22%20fill%3D%22%23fdd888%22%2F%3E%3Cpath%20fill%3D%22%23fcab40%22%20d%3D%22M8.001%2027a1%201%200%200%201-1-1v-3.958c-.042-.634.187-2.036%201.317-2.884l9.022-7.91a1%201%200%200%201%201.318%201.504l-9.08%207.958C8.974%2021.166%209%2021.982%209%2021.99L9.002%2026a1%201%200%200%201-1.001%201%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2213%22%20r%3D%223%22%20fill%3D%22%2331373d%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/graduation-cap.svg?color=%231a73e8&size=48
