hat icon
hat-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- hat-fill
- Set
- MingCute Icon
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in MingCute Icon
The same icon in other sets
Related icons in MingCute Icon
Use the hat icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m5.03 13.701l.71-5.69a3 3 0 0 1 3.566-2.57l2.498.5a1 1 0 0 0 .392 0l2.498-.5a3 3 0 0 1 3.565 2.57l.712 5.69c.692.173 1.307.383 1.787.635c.639.336 1.242.886 1.242 1.664s-.603 1.328-1.242 1.664c-.569.298-1.326.537-2.177.726c-1.719.382-4.045.61-6.581.61s-4.862-.228-6.58-.61c-.852-.189-1.61-.428-2.178-.726C2.603 17.328 2 16.777 2 16s.603-1.328 1.242-1.664c.48-.252 1.095-.462 1.788-.635m.823 2.737c-.625-.139-1.11-.29-1.455-.438c.345-.148.83-.3 1.455-.438C7.391 15.22 9.565 15 12 15s4.609.22 6.147.562c.625.139 1.11.29 1.455.438c-.344.148-.83.299-1.455.438C16.609 16.78 14.435 17 12 17s-4.609-.22-6.147-.562" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function MingcuteHatFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="m5.03 13.701l.71-5.69a3 3 0 0 1 3.566-2.57l2.498.5a1 1 0 0 0 .392 0l2.498-.5a3 3 0 0 1 3.565 2.57l.712 5.69c.692.173 1.307.383 1.787.635c.639.336 1.242.886 1.242 1.664s-.603 1.328-1.242 1.664c-.569.298-1.326.537-2.177.726c-1.719.382-4.045.61-6.581.61s-4.862-.228-6.58-.61c-.852-.189-1.61-.428-2.178-.726C2.603 17.328 2 16.777 2 16s.603-1.328 1.242-1.664c.48-.252 1.095-.462 1.788-.635m.823 2.737c-.625-.139-1.11-.29-1.455-.438c.345-.148.83-.3 1.455-.438C7.391 15.22 9.565 15 12 15s4.609.22 6.147.562c.625.139 1.11.29 1.455.438c-.344.148-.83.299-1.455.438C16.609 16.78 14.435 17 12 17s-4.609-.22-6.147-.562" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m5.03 13.701l.71-5.69a3 3 0 0 1 3.566-2.57l2.498.5a1 1 0 0 0 .392 0l2.498-.5a3 3 0 0 1 3.565 2.57l.712 5.69c.692.173 1.307.383 1.787.635c.639.336 1.242.886 1.242 1.664s-.603 1.328-1.242 1.664c-.569.298-1.326.537-2.177.726c-1.719.382-4.045.61-6.581.61s-4.862-.228-6.58-.61c-.852-.189-1.61-.428-2.178-.726C2.603 17.328 2 16.777 2 16s.603-1.328 1.242-1.664c.48-.252 1.095-.462 1.788-.635m.823 2.737c-.625-.139-1.11-.29-1.455-.438c.345-.148.83-.3 1.455-.438C7.391 15.22 9.565 15 12 15s4.609.22 6.147.562c.625.139 1.11.29 1.455.438c-.344.148-.83.299-1.455.438C16.609 16.78 14.435 17 12 17s-4.609-.22-6.147-.562" clip-rule="evenodd"/></svg> </template>
CSS
.icon-hat-fill {
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%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22m5.03%2013.701l.71-5.69a3%203%200%200%201%203.566-2.57l2.498.5a1%201%200%200%200%20.392%200l2.498-.5a3%203%200%200%201%203.565%202.57l.712%205.69c.692.173%201.307.383%201.787.635c.639.336%201.242.886%201.242%201.664s-.603%201.328-1.242%201.664c-.569.298-1.326.537-2.177.726c-1.719.382-4.045.61-6.581.61s-4.862-.228-6.58-.61c-.852-.189-1.61-.428-2.178-.726C2.603%2017.328%202%2016.777%202%2016s.603-1.328%201.242-1.664c.48-.252%201.095-.462%201.788-.635m.823%202.737c-.625-.139-1.11-.29-1.455-.438c.345-.148.83-.3%201.455-.438C7.391%2015.22%209.565%2015%2012%2015s4.609.22%206.147.562c.625.139%201.11.29%201.455.438c-.344.148-.83.299-1.455.438C16.609%2016.78%2014.435%2017%2012%2017s-4.609-.22-6.147-.562%22%20clip-rule%3D%22evenodd%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%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22m5.03%2013.701l.71-5.69a3%203%200%200%201%203.566-2.57l2.498.5a1%201%200%200%200%20.392%200l2.498-.5a3%203%200%200%201%203.565%202.57l.712%205.69c.692.173%201.307.383%201.787.635c.639.336%201.242.886%201.242%201.664s-.603%201.328-1.242%201.664c-.569.298-1.326.537-2.177.726c-1.719.382-4.045.61-6.581.61s-4.862-.228-6.58-.61c-.852-.189-1.61-.428-2.178-.726C2.603%2017.328%202%2016.777%202%2016s.603-1.328%201.242-1.664c.48-.252%201.095-.462%201.788-.635m.823%202.737c-.625-.139-1.11-.29-1.455-.438c.345-.148.83-.3%201.455-.438C7.391%2015.22%209.565%2015%2012%2015s4.609.22%206.147.562c.625.139%201.11.29%201.455.438c-.344.148-.83.299-1.455.438C16.609%2016.78%2014.435%2017%2012%2017s-4.609-.22-6.147-.562%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/hat-fill.svg?color=%231a73e8&size=48
