cowboy hat icon
cowboy-hat-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- cowboy-hat-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
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 256 256"><path fill="currentColor" d="M216 122a6 6 0 0 0-5.09 2.82a177 177 0 0 1-16.69 22.65l-17.87-94a14 14 0 0 0-22.5-8.35l-.1.08l-24.53 20.39a2 2 0 0 1-2.44 0l-24.53-20.43l-.1-.08a14 14 0 0 0-22.5 8.34l-17.88 94.07a178 178 0 0 1-16.68-22.67A6 6 0 0 0 40 122a38 38 0 0 0 0 76h176a38 38 0 0 0 0-76M91.44 55.65a2 2 0 0 1 3.18-1.22l24.54 20.43l.09.08a13.93 13.93 0 0 0 17.5 0l.09-.08l24.54-20.43a2 2 0 0 1 3.18 1.23L178.69 130H77.31ZM40 186a26 26 0 0 1-3.17-51.81c17.67 27.25 36.7 42.86 52.79 51.81Zm88 0c-.34 0-26.71-.41-56-27.91L75 142h106l3 16.05a115.8 115.8 0 0 1-28.89 20.19C139.38 185.81 128.08 186 128 186m88 0h-49.62c16.09-8.95 35.12-24.56 52.79-51.81A26 26 0 0 1 216 186"/></svg>
React
import type { SVGProps } from "react";
export function PhCowboyHatLight(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="M216 122a6 6 0 0 0-5.09 2.82a177 177 0 0 1-16.69 22.65l-17.87-94a14 14 0 0 0-22.5-8.35l-.1.08l-24.53 20.39a2 2 0 0 1-2.44 0l-24.53-20.43l-.1-.08a14 14 0 0 0-22.5 8.34l-17.88 94.07a178 178 0 0 1-16.68-22.67A6 6 0 0 0 40 122a38 38 0 0 0 0 76h176a38 38 0 0 0 0-76M91.44 55.65a2 2 0 0 1 3.18-1.22l24.54 20.43l.09.08a13.93 13.93 0 0 0 17.5 0l.09-.08l24.54-20.43a2 2 0 0 1 3.18 1.23L178.69 130H77.31ZM40 186a26 26 0 0 1-3.17-51.81c17.67 27.25 36.7 42.86 52.79 51.81Zm88 0c-.34 0-26.71-.41-56-27.91L75 142h106l3 16.05a115.8 115.8 0 0 1-28.89 20.19C139.38 185.81 128.08 186 128 186m88 0h-49.62c16.09-8.95 35.12-24.56 52.79-51.81A26 26 0 0 1 216 186"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M216 122a6 6 0 0 0-5.09 2.82a177 177 0 0 1-16.69 22.65l-17.87-94a14 14 0 0 0-22.5-8.35l-.1.08l-24.53 20.39a2 2 0 0 1-2.44 0l-24.53-20.43l-.1-.08a14 14 0 0 0-22.5 8.34l-17.88 94.07a178 178 0 0 1-16.68-22.67A6 6 0 0 0 40 122a38 38 0 0 0 0 76h176a38 38 0 0 0 0-76M91.44 55.65a2 2 0 0 1 3.18-1.22l24.54 20.43l.09.08a13.93 13.93 0 0 0 17.5 0l.09-.08l24.54-20.43a2 2 0 0 1 3.18 1.23L178.69 130H77.31ZM40 186a26 26 0 0 1-3.17-51.81c17.67 27.25 36.7 42.86 52.79 51.81Zm88 0c-.34 0-26.71-.41-56-27.91L75 142h106l3 16.05a115.8 115.8 0 0 1-28.89 20.19C139.38 185.81 128.08 186 128 186m88 0h-49.62c16.09-8.95 35.12-24.56 52.79-51.81A26 26 0 0 1 216 186"/></svg> </template>
CSS
.icon-cowboy-hat-light {
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%22M216%20122a6%206%200%200%200-5.09%202.82a177%20177%200%200%201-16.69%2022.65l-17.87-94a14%2014%200%200%200-22.5-8.35l-.1.08l-24.53%2020.39a2%202%200%200%201-2.44%200l-24.53-20.43l-.1-.08a14%2014%200%200%200-22.5%208.34l-17.88%2094.07a178%20178%200%200%201-16.68-22.67A6%206%200%200%200%2040%20122a38%2038%200%200%200%200%2076h176a38%2038%200%200%200%200-76M91.44%2055.65a2%202%200%200%201%203.18-1.22l24.54%2020.43l.09.08a13.93%2013.93%200%200%200%2017.5%200l.09-.08l24.54-20.43a2%202%200%200%201%203.18%201.23L178.69%20130H77.31ZM40%20186a26%2026%200%200%201-3.17-51.81c17.67%2027.25%2036.7%2042.86%2052.79%2051.81Zm88%200c-.34%200-26.71-.41-56-27.91L75%20142h106l3%2016.05a115.8%20115.8%200%200%201-28.89%2020.19C139.38%20185.81%20128.08%20186%20128%20186m88%200h-49.62c16.09-8.95%2035.12-24.56%2052.79-51.81A26%2026%200%200%201%20216%20186%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%22M216%20122a6%206%200%200%200-5.09%202.82a177%20177%200%200%201-16.69%2022.65l-17.87-94a14%2014%200%200%200-22.5-8.35l-.1.08l-24.53%2020.39a2%202%200%200%201-2.44%200l-24.53-20.43l-.1-.08a14%2014%200%200%200-22.5%208.34l-17.88%2094.07a178%20178%200%200%201-16.68-22.67A6%206%200%200%200%2040%20122a38%2038%200%200%200%200%2076h176a38%2038%200%200%200%200-76M91.44%2055.65a2%202%200%200%201%203.18-1.22l24.54%2020.43l.09.08a13.93%2013.93%200%200%200%2017.5%200l.09-.08l24.54-20.43a2%202%200%200%201%203.18%201.23L178.69%20130H77.31ZM40%20186a26%2026%200%200%201-3.17-51.81c17.67%2027.25%2036.7%2042.86%2052.79%2051.81Zm88%200c-.34%200-26.71-.41-56-27.91L75%20142h106l3%2016.05a115.8%20115.8%200%200%201-28.89%2020.19C139.38%20185.81%20128.08%20186%20128%20186m88%200h-49.62c16.09-8.95%2035.12-24.56%2052.79-51.81A26%2026%200%200%201%20216%20186%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/cowboy-hat-light.svg?color=%231a73e8&size=48
