academic cap icon

academic-cap from HeroIcons by Refactoring UI Inc · Outline 24x24 · MIT Free for personal and commercial use.

Name: academic-cap
Set: HeroIcons
Style: Outline 24x24
Viewbox: 24×24
License: MIT

3 other variants in HeroIcons

academic-cap-16-solid academic-cap-20-solid academic-cap-solid

The same icon in other sets

Use the academic cap icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60 60 0 0 0-.491 6.347A48.6 48.6 0 0 1 12 20.904a48.6 48.6 0 0 1 8.232-4.41a61 61 0 0 0-.491-6.347m-15.482 0a51 51 0 0 0-2.658-.813A60 60 0 0 1 12 3.493a60 60 0 0 1 10.399 5.84q-1.345.372-2.658.814m-15.482 0A51 51 0 0 1 12 13.489a50.7 50.7 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55 55 0 0 1 12 8.443m-7.007 11.55A5.98 5.98 0 0 0 6.75 15.75v-1.5"/></svg>

React

import type { SVGProps } from "react";

export function HeroiconsAcademicCap(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M4.26 10.147a60 60 0 0 0-.491 6.347A48.6 48.6 0 0 1 12 20.904a48.6 48.6 0 0 1 8.232-4.41a61 61 0 0 0-.491-6.347m-15.482 0a51 51 0 0 0-2.658-.813A60 60 0 0 1 12 3.493a60 60 0 0 1 10.399 5.84q-1.345.372-2.658.814m-15.482 0A51 51 0 0 1 12 13.489a50.7 50.7 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55 55 0 0 1 12 8.443m-7.007 11.55A5.98 5.98 0 0 0 6.75 15.75v-1.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60 60 0 0 0-.491 6.347A48.6 48.6 0 0 1 12 20.904a48.6 48.6 0 0 1 8.232-4.41a61 61 0 0 0-.491-6.347m-15.482 0a51 51 0 0 0-2.658-.813A60 60 0 0 1 12 3.493a60 60 0 0 1 10.399 5.84q-1.345.372-2.658.814m-15.482 0A51 51 0 0 1 12 13.489a50.7 50.7 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55 55 0 0 1 12 8.443m-7.007 11.55A5.98 5.98 0 0 0 6.75 15.75v-1.5"/></svg>
</template>

CSS

.icon-academic-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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4.26%2010.147a60%2060%200%200%200-.491%206.347A48.6%2048.6%200%200%201%2012%2020.904a48.6%2048.6%200%200%201%208.232-4.41a61%2061%200%200%200-.491-6.347m-15.482%200a51%2051%200%200%200-2.658-.813A60%2060%200%200%201%2012%203.493a60%2060%200%200%201%2010.399%205.84q-1.345.372-2.658.814m-15.482%200A51%2051%200%200%201%2012%2013.489a50.7%2050.7%200%200%201%207.74-3.342M6.75%2015a.75.75%200%201%200%200-1.5a.75.75%200%200%200%200%201.5m0%200v-3.675A55%2055%200%200%201%2012%208.443m-7.007%2011.55A5.98%205.98%200%200%200%206.75%2015.75v-1.5%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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4.26%2010.147a60%2060%200%200%200-.491%206.347A48.6%2048.6%200%200%201%2012%2020.904a48.6%2048.6%200%200%201%208.232-4.41a61%2061%200%200%200-.491-6.347m-15.482%200a51%2051%200%200%200-2.658-.813A60%2060%200%200%201%2012%203.493a60%2060%200%200%201%2010.399%205.84q-1.345.372-2.658.814m-15.482%200A51%2051%200%200%201%2012%2013.489a50.7%2050.7%200%200%201%207.74-3.342M6.75%2015a.75.75%200%201%200%200-1.5a.75.75%200%200%200%200%201.5m0%200v-3.675A55%2055%200%200%201%2012%208.443m-7.007%2011.55A5.98%205.98%200%200%200%206.75%2015.75v-1.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/academic-cap.svg?color=%231a73e8&size=48