cowboy hat icon
cowboy-hat from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- cowboy-hat
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
Use the cowboy hat icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16.276 18c-.985 1.102-2.264 2-4.276 2s-3.29-.898-4.276-2m8.552 0c1.211-1.354 1.979-3.016 3.122-3.692M16.276 18c2.069 0 5.724.562 5.724-2.5c0-.787-.68-1.5-1.5-1.5c-.282 0-.54.053-.781.15m0 0q-.166.066-.321.158m.32-.159l-.32.16m0 0C18.073 14.955 15.68 16 12 16s-6.073-1.044-7.398-1.692M7.724 18c-1.211-1.354-1.979-3.016-3.122-3.692M7.724 18C5.655 18 2 18.562 2 15.5c0-.787.68-1.5 1.5-1.5c.282 0 .54.053.781.15m0 0q.166.066.321.158m-.32-.159l.32.16"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 12c0-1.505.442-5.37 2.576-7.599C8.838 4.127 9.2 4 9.567 4c.27 0 .523.144.673.384l.205.328c.347.555.93.888 1.555.888a1.84 1.84 0 0 0 1.555-.888l.205-.328A.8.8 0 0 1 14.433 4c.367 0 .729.127.991.401C17.558 6.631 18 10.495 18 12"/><path stroke-linecap="round" d="M6.5 10c1.416.51 2.89 1 5.5 1s4.084-.49 5.5-1"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsCowboyHat(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M16.276 18c-.985 1.102-2.264 2-4.276 2s-3.29-.898-4.276-2m8.552 0c1.211-1.354 1.979-3.016 3.122-3.692M16.276 18c2.069 0 5.724.562 5.724-2.5c0-.787-.68-1.5-1.5-1.5c-.282 0-.54.053-.781.15m0 0q-.166.066-.321.158m.32-.159l-.32.16m0 0C18.073 14.955 15.68 16 12 16s-6.073-1.044-7.398-1.692M7.724 18c-1.211-1.354-1.979-3.016-3.122-3.692M7.724 18C5.655 18 2 18.562 2 15.5c0-.787.68-1.5 1.5-1.5c.282 0 .54.053.781.15m0 0q.166.066.321.158m-.32-.159l.32.16"/><path strokeLinecap="round" strokeLinejoin="round" d="M6 12c0-1.505.442-5.37 2.576-7.599C8.838 4.127 9.2 4 9.567 4c.27 0 .523.144.673.384l.205.328c.347.555.93.888 1.555.888a1.84 1.84 0 0 0 1.555-.888l.205-.328A.8.8 0 0 1 14.433 4c.367 0 .729.127.991.401C17.558 6.631 18 10.495 18 12"/><path strokeLinecap="round" d="M6.5 10c1.416.51 2.89 1 5.5 1s4.084-.49 5.5-1"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16.276 18c-.985 1.102-2.264 2-4.276 2s-3.29-.898-4.276-2m8.552 0c1.211-1.354 1.979-3.016 3.122-3.692M16.276 18c2.069 0 5.724.562 5.724-2.5c0-.787-.68-1.5-1.5-1.5c-.282 0-.54.053-.781.15m0 0q-.166.066-.321.158m.32-.159l-.32.16m0 0C18.073 14.955 15.68 16 12 16s-6.073-1.044-7.398-1.692M7.724 18c-1.211-1.354-1.979-3.016-3.122-3.692M7.724 18C5.655 18 2 18.562 2 15.5c0-.787.68-1.5 1.5-1.5c.282 0 .54.053.781.15m0 0q.166.066.321.158m-.32-.159l.32.16"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 12c0-1.505.442-5.37 2.576-7.599C8.838 4.127 9.2 4 9.567 4c.27 0 .523.144.673.384l.205.328c.347.555.93.888 1.555.888a1.84 1.84 0 0 0 1.555-.888l.205-.328A.8.8 0 0 1 14.433 4c.367 0 .729.127.991.401C17.558 6.631 18 10.495 18 12"/><path stroke-linecap="round" d="M6.5 10c1.416.51 2.89 1 5.5 1s4.084-.49 5.5-1"/></g></svg> </template>
CSS
.icon-cowboy-hat {
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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M16.276%2018c-.985%201.102-2.264%202-4.276%202s-3.29-.898-4.276-2m8.552%200c1.211-1.354%201.979-3.016%203.122-3.692M16.276%2018c2.069%200%205.724.562%205.724-2.5c0-.787-.68-1.5-1.5-1.5c-.282%200-.54.053-.781.15m0%200q-.166.066-.321.158m.32-.159l-.32.16m0%200C18.073%2014.955%2015.68%2016%2012%2016s-6.073-1.044-7.398-1.692M7.724%2018c-1.211-1.354-1.979-3.016-3.122-3.692M7.724%2018C5.655%2018%202%2018.562%202%2015.5c0-.787.68-1.5%201.5-1.5c.282%200%20.54.053.781.15m0%200q.166.066.321.158m-.32-.159l.32.16%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6%2012c0-1.505.442-5.37%202.576-7.599C8.838%204.127%209.2%204%209.567%204c.27%200%20.523.144.673.384l.205.328c.347.555.93.888%201.555.888a1.84%201.84%200%200%200%201.555-.888l.205-.328A.8.8%200%200%201%2014.433%204c.367%200%20.729.127.991.401C17.558%206.631%2018%2010.495%2018%2012%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M6.5%2010c1.416.51%202.89%201%205.5%201s4.084-.49%205.5-1%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M16.276%2018c-.985%201.102-2.264%202-4.276%202s-3.29-.898-4.276-2m8.552%200c1.211-1.354%201.979-3.016%203.122-3.692M16.276%2018c2.069%200%205.724.562%205.724-2.5c0-.787-.68-1.5-1.5-1.5c-.282%200-.54.053-.781.15m0%200q-.166.066-.321.158m.32-.159l-.32.16m0%200C18.073%2014.955%2015.68%2016%2012%2016s-6.073-1.044-7.398-1.692M7.724%2018c-1.211-1.354-1.979-3.016-3.122-3.692M7.724%2018C5.655%2018%202%2018.562%202%2015.5c0-.787.68-1.5%201.5-1.5c.282%200%20.54.053.781.15m0%200q.166.066.321.158m-.32-.159l.32.16%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6%2012c0-1.505.442-5.37%202.576-7.599C8.838%204.127%209.2%204%209.567%204c.27%200%20.523.144.673.384l.205.328c.347.555.93.888%201.555.888a1.84%201.84%200%200%200%201.555-.888l.205-.328A.8.8%200%200%201%2014.433%204c.367%200%20.729.127.991.401C17.558%206.631%2018%2010.495%2018%2012%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M6.5%2010c1.416.51%202.89%201%205.5%201s4.084-.49%205.5-1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/cowboy-hat.svg?color=%231a73e8&size=48
