Cowboy Hat Face icon
fluent-emoji:cowboy-hat-face
The Cowboy Hat Face icon (fluent-emoji:cowboy-hat-face) is a free SVG icon from the Fluent Emoji set by Microsoft Corporation. It is drawn on a 32 × 32 grid. Fluent Emoji icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Fluent Emoji
- Author
- Microsoft Corporation
- License
- MIT
- Size
- 32 × 32
- Tags
- cowboyhat, hatface, cowboyhatface
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#i2Zrh7s)"><path fill="url(#iNVipXb)" d="M15.962 30.933c8.002 0 12-5.372 12-12c0-6.627-3.998-12-12-12s-12 5.373-12 12c0 6.628 3.998 12 12 12"/></g><path fill="url(#i05ziEc)" d="M15.962 30.933c8.002 0 12-5.372 12-12c0-6.627-3.998-12-12-12s-12 5.373-12 12c0 6.628 3.998 12 12 12"/><path fill="url(#iiLJltc)" d="M15.962 30.933c8.002 0 12-5.372 12-12c0-6.627-3.998-12-12-12s-12 5.373-12 12c0 6.628 3.998 12 12 12"/><path fill="url(#i4eANTc)" d="M18.856 2a3.1 3.1 0 0 0-1.839.602a1.524 1.524 0 0 1-2.12 0A3.1 3.1 0 0 0 13.057 2C11.35 2 9.962 3.362 9.962 5.04v4.967h11.99V5.04c0-1.678-1.387-3.04-3.096-3.04"/><g filter="url(#izlUqmX)"><circle cx="13.35" cy="4.412" r="2.412" fill="url(#iD9Z96c)" fill-opacity=".75"/></g><g filter="url(#iLB0A0d)"><ellipse cx="19.575" cy="4.63" fill="url(#iq22XCc)" fill-opacity=".75" rx="2.215" ry="2.194"/></g><path fill="url(#imcTnnb)" d="M21.96 4.94H9.875a.1.1 0 0 0-.1.1v.9H22.06v-.9a.1.1 0 0 0-.1-.1"/><path fill="url(#ir6DLoc)" d="M21.96 4.94H9.875a.1.1 0 0 0-.1.1v.9H22.06v-.9a.1.1 0 0 0-.1-.1"/><g filter="url(#i8v2wme)" opacity=".8"><path fill="#D3751F" d="M10.638 18.377a3.517 3.517 0 1 0 0-7.034a3.517 3.517 0 0 0 0 7.034"/></g><g filter="url(#iATek7d)"><path fill="#FF9B40" d="M19.952 18.257a3.517 3.517 0 1 0 0-7.033a3.517 3.517 0 0 0 0 7.033"/></g><path fill="#fff" d="M11.482 17.973a3.64 3.64 0 1 0 0-7.28a3.64 3.64 0 0 0 0 7.28m8.94 0a3.64 3.64 0 1 0 0-7.28a3.64 3.64 0 0 0 0 7.28"/><path fill="#3F2931" d="M9.502 14.983c0-1.35 1.1-2.45 2.45-2.45s2.45 1.1 2.45 2.45s-1.1 2.45-2.45 2.45s-2.45-1.1-2.45-2.45m8 0c0-1.35 1.1-2.45 2.45-2.45s2.45 1.1 2.45 2.45s-1.1 2.45-2.45 2.45s-2.45-1.1-2.45-2.45"/><path fill="url(#itqPvad)" d="M26.487 8.106h3.447c0-2.61-1.367-4.72-3.977-4.72c-1.82 0-.54 1.04-1.32 2.56l-17.54-.01c0-1.05.13-2.55-1.7-2.55c-2.61 0-3.81 2.11-3.81 4.72h1.11l2.7-.155c2.93 2.47 5.455 4.14 10.58 4.14c4.14 0 7.58-1.505 10.51-3.985"/><path fill="url(#iQbgkvd)" d="M26.487 8.106h3.447c0-2.61-1.367-4.72-3.977-4.72c-1.82 0-.54 1.04-1.32 2.56l-17.54-.01c0-1.05.13-2.55-1.7-2.55c-2.61 0-3.81 2.11-3.81 4.72h1.11l2.7-.155c2.93 2.47 5.455 4.14 10.58 4.14c4.14 0 7.58-1.505 10.51-3.985"/><path fill="url(#iKihydb)" d="M26.487 8.106h3.447c0-2.61-1.367-4.72-3.977-4.72c-1.82 0-.54 1.04-1.32 2.56l-17.54-.01c0-1.05.13-2.55-1.7-2.55c-2.61 0-3.81 2.11-3.81 4.72h1.11l2.7-.155c2.93 2.47 5.455 4.14 10.58 4.14c4.14 0 7.58-1.505 10.51-3.985"/><path fill="url(#iGE0HXd)" d="M8.057 5.873s-.02.71.01 1.31c.12 2.17 1.86 3.8 1.86 3.8s-.91-.392-1.669-.755c-.387-.186-.857-.13-1.155.179c-1.092 1.134-1.622 2.118-1.622 2.118s-1.527 0-3.004-1.192c-1.26-1.1-1.43-2.76-1.43-2.76s-.68-3.95 3.14-5.29c3.07-1.07 3.86.55 3.86 1.69c0 .22.01.9.01.9"/><path fill="url(#ie8DJad)" d="M8.057 5.873s-.02.71.01 1.31c.12 2.17 1.86 3.8 1.86 3.8s-.91-.392-1.669-.755c-.387-.186-.857-.13-1.155.179c-1.092 1.134-1.622 2.118-1.622 2.118s-1.527 0-3.004-1.192c-1.26-1.1-1.43-2.76-1.43-2.76s-.68-3.95 3.14-5.29c3.07-1.07 3.86.55 3.86 1.69c0 .22.01.9.01.9"/><g filter="url(#i4K8Pxe)"><path fill="url(#igr9wOd)" d="M1.282 8.249c.74-2.6 4.365-.801 6.111 1.263c.293.347.593.586.913.736l-.006.016l-.076-.036c-.388-.186-.858-.131-1.154.18a8.3 8.3 0 0 0-1.764 1.684s-1.297 0-2.75-1.219A3.63 3.63 0 0 1 1.31 8.67c-.041-.258-.1-.17-.029-.421"/></g><path fill="url(#ilP1Yxs)" d="M23.87 5.876s.02.71-.01 1.31c-.12 2.17-1.867 3.738-1.867 3.738s.913-.356 1.672-.702c.391-.178.862-.123 1.157.189c1.072 1.133 1.529 2.114 1.529 2.114s1.55.17 3.1-1.19c1.26-1.1 1.43-2.76 1.43-2.76s.68-3.95-3.14-5.29c-3.07-1.07-3.86.55-3.86 1.69c0 .22-.01.9-.01.9"/><path fill="url(#ikjXxYJ)" d="M23.87 5.876s.02.71-.01 1.31c-.12 2.17-1.867 3.738-1.867 3.738s.913-.356 1.672-.702c.391-.178.862-.123 1.157.189c1.072 1.133 1.529 2.114 1.529 2.114s1.55.17 3.1-1.19c1.26-1.1 1.43-2.76 1.43-2.76s.68-3.95-3.14-5.29c-3.07-1.07-3.86.55-3.86 1.69c0 .22-.01.9-.01.9"/><g filter="url(#id0TnhP)"><path fill="url(#i5t93Nd)" d="M30.805 8.423c-1.08-2.404-4.619-1.066-6.26.995c-.32.4-.645.668-.993.832l.006.017l.076-.037c.387-.186.97-.276 1.265.037c1.072 1.133 1.532 2.09 1.532 2.09s1.293.298 2.843-1.062c.684-.578 1.087-1.287 1.317-1.835c.235-.56.462-.484.213-1.037"/></g><g filter="url(#ixk2osc)" opacity=".25"><path stroke="#fff" stroke-linecap="round" stroke-width=".5" d="M25.187 9.888a19.5 19.5 0 0 0 1.922-2.297"/></g><path fill="url(#iGQ2OAc)" d="M15.984 27.898c-7.905 0-7.905-7.905-7.905-7.905h15.81s0 7.905-7.905 7.905"/><path fill="url(#iuM858d)" d="M8.957 20.31v-.317H23.01v.318a1 1 0 0 1-1 1H9.957a1 1 0 0 1-1-1"/><defs><radialGradient id="iNVipXb" cx="0" cy="0" r="1" gradientTransform="rotate(132.839 9.23 11.728)scale(32.1483)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF478"/><stop offset=".475" stop-color="#FFB02E"/><stop offset="1" stop-color="#F70A8D"/></radialGradient><radialGradient id="i05ziEc" cx="0" cy="0" r="1" gradientTransform="rotate(90.458 11.34 3.412)scale(29.9527 50.053)" gradientUnits="userSpaceOnUse"><stop offset=".546" stop-color="#C47F18"/><stop offset=".807" stop-color="#C47F18" stop-opacity="0"/></radialGradient><radialGradient id="iiLJltc" cx="0" cy="0" r="1" gradientTransform="rotate(90 .014 15.949)scale(15.3315)" gradientUnits="userSpaceOnUse"><stop offset=".824" stop-color="#F59639" stop-opacity="0"/><stop offset="1" stop-color="#FF63C4"/></radialGradient><radialGradient id="iD9Z96c" cx="0" cy="0" r="1" gradientTransform="matrix(1.28646 -1.44727 1.66238 1.47767 13.788 4.412)" gradientUnits="userSpaceOnUse"><stop stop-color="#BA7D72"/><stop offset=".866" stop-color="#BA7D72" stop-opacity="0"/></radialGradient><radialGradient id="iq22XCc" cx="0" cy="0" r="1" gradientTransform="matrix(1.18134 -1.3166 1.5139 1.35835 19.977 4.63)" gradientUnits="userSpaceOnUse"><stop stop-color="#BA7D72"/><stop offset=".866" stop-color="#BA7D72" stop-opacity="0"/></radialGradient><radialGradient id="iQbgkvd" cx="0" cy="0" r="1" gradientTransform="rotate(89.354 5.611 10.477)scale(8.31303 13.5711)" gradientUnits="userSpaceOnUse"><stop offset=".807" stop-color="#BA7D72" stop-opacity="0"/><stop offset="1" stop-color="#BA7D72"/></radialGradient><radialGradient id="iKihydb" cx="0" cy="0" r="1" gradientTransform="rotate(90.256 6.219 9.562)scale(10.8311 16.1714)" gradientUnits="userSpaceOnUse"><stop offset=".698" stop-color="#A30599" stop-opacity="0"/><stop offset="1" stop-color="#BF0AB4"/></radialGradient><radialGradient id="ie8DJad" cx="0" cy="0" r="1" gradientTransform="matrix(-2.71125 .5 -1.35914 -7.36988 9.927 8.748)" gradientUnits="userSpaceOnUse"><stop stop-color="#BA7D72"/><stop offset="1" stop-color="#BA7D72" stop-opacity="0"/></radialGradient><radialGradient id="igr9wOd" cx="0" cy="0" r="1" gradientTransform="matrix(-4.24998 -6.34376 5.06812 -3.39537 7.274 14.623)" gradientUnits="userSpaceOnUse"><stop stop-color="#BF0AB4"/><stop offset="1" stop-color="#A30599" stop-opacity="0"/></radialGradient><radialGradient id="ikjXxYJ" cx="0" cy="0" r="1" gradientTransform="matrix(2.71125 .5 -1.35913 7.36988 22 8.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#BA7D72"/><stop offset="1" stop-color="#BA7D72" stop-opacity="0"/></radialGradient><radialGradient id="i5t93Nd" cx="0" cy="0" r="1" gradientTransform="matrix(4.25 -6.34376 5.06811 3.39538 24.583 14.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#BF0AB4"/><stop offset="1" stop-color="#A30599" stop-opacity="0"/></radialGradient><radialGradient id="iGQ2OAc" cx="0" cy="0" r="1" gradientTransform="matrix(0 -9.6614 19.3228 0 15.983 29.655)" gradientUnits="userSpaceOnUse"><stop stop-color="#F70A8D"/><stop offset="1" stop-color="#89029C"/></radialGradient><filter id="i2Zrh7s" width="26" height="26" x="3.962" y="4.933" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/><feBlend in2="shape" result="effect1_innerShadow_6808_5273"/></filter><filter id="izlUqmX" width="6.824" height="6.824" x="9.938" y="1" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="iLB0A0d" width="6.43" height="6.389" x="16.36" y="1.436" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="i8v2wme" width="9.033" height="9.033" x="6.122" y="10.343" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="iATek7d" width="9.033" height="9.033" x="15.435" y="10.223" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="i4K8Pxe" width="9.057" height="7.134" x=".249" y="5.958" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="id0TnhP" width="9.36" height="7.247" x="22.552" y="6.138" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><filter id="ixk2osc" width="4.422" height="4.797" x="23.937" y="6.341" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6808_5273" stdDeviation=".5"/></filter><linearGradient id="i4eANTc" x1="15.959" x2="15.959" y1="-.086" y2="9.199" gradientUnits="userSpaceOnUse"><stop stop-color="#9C634D"/><stop offset="1" stop-color="#63332A"/></linearGradient><linearGradient id="imcTnnb" x1="19.181" x2="7.399" y1="4.123" y2="9.154" gradientUnits="userSpaceOnUse"><stop stop-color="#A97C50"/><stop offset="1" stop-color="#875236"/></linearGradient><linearGradient id="ir6DLoc" x1="15.918" x2="15.918" y1="4.6" y2="5.209" gradientUnits="userSpaceOnUse"><stop stop-color="#C59779"/><stop offset="1" stop-color="#C59779" stop-opacity="0"/></linearGradient><linearGradient id="itqPvad" x1="3.746" x2="26.621" y1="7.186" y2="7.186" gradientUnits="userSpaceOnUse"><stop stop-color="#63332A"/><stop offset=".422" stop-color="#9C634D"/><stop offset=".896" stop-color="#63332A"/></linearGradient><linearGradient id="iGE0HXd" x1="5.997" x2="5.216" y1="4.279" y2="13.029" gradientUnits="userSpaceOnUse"><stop stop-color="#9C634D"/><stop offset="1" stop-color="#63332A"/></linearGradient><linearGradient id="ilP1Yxs" x1="25.931" x2="26.712" y1="4.282" y2="13.031" gradientUnits="userSpaceOnUse"><stop stop-color="#9C634D"/><stop offset="1" stop-color="#63332A"/></linearGradient><linearGradient id="iuM858d" x1="15.983" x2="15.983" y1="19.993" y2="21.311" gradientUnits="userSpaceOnUse"><stop stop-color="#ECCDFF"/><stop offset="1" stop-color="#fff"/></linearGradient></defs></g></svg>How to use the Cowboy Hat Face icon
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:cowboy-hat-face" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:cowboy-hat-face" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:cowboy-hat-face" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--cowboy-hat-face]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:cowboy-hat-face"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:cowboy-hat-face"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/fluent-emoji/cowboy-hat-face.svg" alt="Cowboy Hat Face icon" width="24" height="24">Cowboy Hat Face icon in other icon sets
Cowboy Hat Face icon FAQ
Is the Cowboy Hat Face icon free for commercial use?
Yes. Fluent Emoji icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Cowboy Hat Face icon in React?
Install @iconify/react and render <Icon icon="fluent-emoji:cowboy-hat-face" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Cowboy Hat Face icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-emoji/cowboy-hat-face.svg" alt="Cowboy Hat Face icon">, or paste the SVG code inline to style it with CSS.