hat cowboy icon

hat-cowboy from Font Awesome 6 Solid by Dave Gandy · Regular · Clothing · CC-BY-4.0 Attribution required.

Name
hat-cowboy
Set
Font Awesome 6 Solid
Style
Regular
Category
Clothing
Viewbox
640×512
License
CC BY 4.0

The same icon in other sets

hat-cowboyFont Awesome Solidhat-cowboyLine Awesome

More clothing icons from Font Awesome 6 Solid

graduation-caphat-cowboy-sidehat-wizardshoe-printsuser-tie

Use the hat cowboy icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M320 64c14.4 0 22.3-7 30.8-14.4C360.4 41.1 370.7 32 392 32c49.3 0 84.4 152.2 97.9 221.9c-42.1 18.2-99 34.1-169.9 34.1s-127.8-15.9-169.9-34.1C163.6 184.2 198.7 32 248 32c21.3 0 31.6 9.1 41.2 17.6C297.7 57 305.6 64 320 64M111.1 270.7c47.2 24.5 117.5 49.3 209 49.3s161.8-24.8 208.9-49.3c24.8-12.9 49.8-28.3 70.1-47.7c7.9-7.9 20.2-9.2 29.6-3.3c9.5 5.9 13.5 17.9 9.9 28.5c-13.5 37.7-38.4 72.3-66.1 100.6C523.7 398.9 443.6 448 320 448s-203.6-49.1-252.5-99.2c-27.7-28.4-52.6-63-66.1-100.7c-3.6-10.6.4-22.6 9.9-28.5s21.7-4.5 29.6 3.3c20.4 19.4 45.3 34.8 70.1 47.7z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidHatCowboy(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M320 64c14.4 0 22.3-7 30.8-14.4C360.4 41.1 370.7 32 392 32c49.3 0 84.4 152.2 97.9 221.9c-42.1 18.2-99 34.1-169.9 34.1s-127.8-15.9-169.9-34.1C163.6 184.2 198.7 32 248 32c21.3 0 31.6 9.1 41.2 17.6C297.7 57 305.6 64 320 64M111.1 270.7c47.2 24.5 117.5 49.3 209 49.3s161.8-24.8 208.9-49.3c24.8-12.9 49.8-28.3 70.1-47.7c7.9-7.9 20.2-9.2 29.6-3.3c9.5 5.9 13.5 17.9 9.9 28.5c-13.5 37.7-38.4 72.3-66.1 100.6C523.7 398.9 443.6 448 320 448s-203.6-49.1-252.5-99.2c-27.7-28.4-52.6-63-66.1-100.7c-3.6-10.6.4-22.6 9.9-28.5s21.7-4.5 29.6 3.3c20.4 19.4 45.3 34.8 70.1 47.7z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M320 64c14.4 0 22.3-7 30.8-14.4C360.4 41.1 370.7 32 392 32c49.3 0 84.4 152.2 97.9 221.9c-42.1 18.2-99 34.1-169.9 34.1s-127.8-15.9-169.9-34.1C163.6 184.2 198.7 32 248 32c21.3 0 31.6 9.1 41.2 17.6C297.7 57 305.6 64 320 64M111.1 270.7c47.2 24.5 117.5 49.3 209 49.3s161.8-24.8 208.9-49.3c24.8-12.9 49.8-28.3 70.1-47.7c7.9-7.9 20.2-9.2 29.6-3.3c9.5 5.9 13.5 17.9 9.9 28.5c-13.5 37.7-38.4 72.3-66.1 100.6C523.7 398.9 443.6 448 320 448s-203.6-49.1-252.5-99.2c-27.7-28.4-52.6-63-66.1-100.7c-3.6-10.6.4-22.6 9.9-28.5s21.7-4.5 29.6 3.3c20.4 19.4 45.3 34.8 70.1 47.7z"/></svg>
</template>

CSS

.icon-hat-cowboy {
  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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2064c14.4%200%2022.3-7%2030.8-14.4C360.4%2041.1%20370.7%2032%20392%2032c49.3%200%2084.4%20152.2%2097.9%20221.9c-42.1%2018.2-99%2034.1-169.9%2034.1s-127.8-15.9-169.9-34.1C163.6%20184.2%20198.7%2032%20248%2032c21.3%200%2031.6%209.1%2041.2%2017.6C297.7%2057%20305.6%2064%20320%2064M111.1%20270.7c47.2%2024.5%20117.5%2049.3%20209%2049.3s161.8-24.8%20208.9-49.3c24.8-12.9%2049.8-28.3%2070.1-47.7c7.9-7.9%2020.2-9.2%2029.6-3.3c9.5%205.9%2013.5%2017.9%209.9%2028.5c-13.5%2037.7-38.4%2072.3-66.1%20100.6C523.7%20398.9%20443.6%20448%20320%20448s-203.6-49.1-252.5-99.2c-27.7-28.4-52.6-63-66.1-100.7c-3.6-10.6.4-22.6%209.9-28.5s21.7-4.5%2029.6%203.3c20.4%2019.4%2045.3%2034.8%2070.1%2047.7z%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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2064c14.4%200%2022.3-7%2030.8-14.4C360.4%2041.1%20370.7%2032%20392%2032c49.3%200%2084.4%20152.2%2097.9%20221.9c-42.1%2018.2-99%2034.1-169.9%2034.1s-127.8-15.9-169.9-34.1C163.6%20184.2%20198.7%2032%20248%2032c21.3%200%2031.6%209.1%2041.2%2017.6C297.7%2057%20305.6%2064%20320%2064M111.1%20270.7c47.2%2024.5%20117.5%2049.3%20209%2049.3s161.8-24.8%20208.9-49.3c24.8-12.9%2049.8-28.3%2070.1-47.7c7.9-7.9%2020.2-9.2%2029.6-3.3c9.5%205.9%2013.5%2017.9%209.9%2028.5c-13.5%2037.7-38.4%2072.3-66.1%20100.6C523.7%20398.9%20443.6%20448%20320%20448s-203.6-49.1-252.5-99.2c-27.7-28.4-52.6-63-66.1-100.7c-3.6-10.6.4-22.6%209.9-28.5s21.7-4.5%2029.6%203.3c20.4%2019.4%2045.3%2034.8%2070.1%2047.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/hat-cowboy.svg?color=%231a73e8&size=48