hat icon

Hat: hat. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.856 9.144C14.952 9.241 15 9.359 15 9.5C15 9.92 14.754 10.301 14.263 10.644C13.882 10.91 13.366 11.146 12.713 11.352C12.074 11.554 11.357 11.711 10.562 11.823C9.729 11.941 8.875 12 8 12C7.125 12 6.271 11.941 5.438 11.823C4.643 11.711 3.926 11.554 3.287 11.352C2.634 11.146 2.118 10.91 1.737 10.644C1.246 10.301 1 9.92 1 9.5C1 9.359 1.048 9.241 1.144 9.144C1.241 9.048 1.359 9 1.5 9L3.228 9C3.466 8.619 3.726 8.148 4.008 7.588L4.107 7.389C4.156 7.291 4.208 7.183 4.264 7.065L4.268 7.057C4.468 6.638 4.718 6.098 5.016 5.436C5.277 4.856 5.456 4.47 5.553 4.276C5.596 4.191 5.657 4.124 5.737 4.074C5.817 4.025 5.904 4 6 4C6.315 4 6.598 4.076 6.851 4.228C6.99 4.311 7.158 4.451 7.354 4.646C7.491 4.784 7.595 4.874 7.663 4.915C7.758 4.972 7.87 5 8 5C8.13 5 8.242 4.972 8.337 4.915C8.405 4.874 8.509 4.784 8.646 4.646C8.842 4.451 9.01 4.311 9.149 4.228C9.402 4.076 9.685 4 10 4C10.096 4 10.183 4.025 10.263 4.074C10.343 4.124 10.404 4.191 10.447 4.276C10.544 4.47 10.723 4.856 10.984 5.436C11.282 6.098 11.532 6.638 11.732 7.057C11.79 7.178 11.843 7.288 11.893 7.389L11.989 7.583L11.992 7.588C12.274 8.148 12.534 8.619 12.772 9L14.5 9C14.641 9 14.759 9.048 14.856 9.144ZM9.713 5.059L9.712 5.059C9.696 5.067 9.679 5.075 9.663 5.085C9.595 5.126 9.491 5.216 9.354 5.354C9.158 5.549 8.99 5.689 8.851 5.772C8.598 5.924 8.315 6 8 6C7.685 6 7.402 5.924 7.149 5.772C7.01 5.689 6.842 5.549 6.646 5.354C6.509 5.216 6.405 5.126 6.337 5.085C6.321 5.075 6.304 5.067 6.287 5.059L6.287 5.059C6.195 5.258 6.075 5.52 5.928 5.847C5.698 6.356 5.497 6.795 5.324 7.164C6.119 7.305 7.011 7.375 8 7.375C8.989 7.375 9.881 7.305 10.676 7.164C10.503 6.795 10.302 6.356 10.072 5.847C9.925 5.52 9.805 5.258 9.713 5.059ZM8 9.375C8.815 9.375 9.598 9.344 10.35 9.283C10.83 9.244 11.275 9.194 11.686 9.133C11.509 8.827 11.323 8.481 11.128 8.096C10.205 8.282 9.162 8.375 8 8.375C6.838 8.375 5.795 8.282 4.872 8.096C4.677 8.481 4.491 8.827 4.314 9.133C4.725 9.194 5.17 9.244 5.65 9.283C6.402 9.344 7.185 9.375 8 9.375ZM8 10.375C6.24 10.375 4.723 10.25 3.451 10L2.599 10C2.864 10.141 3.193 10.274 3.588 10.398C4.175 10.583 4.838 10.728 5.578 10.833C6.365 10.944 7.172 11 8 11C8.828 11 9.635 10.944 10.422 10.833C11.162 10.728 11.825 10.583 12.412 10.398C12.807 10.274 13.136 10.141 13.401 10L12.549 10C11.277 10.25 9.76 10.375 8 10.375Z"/></svg>

React

// Gentleface "hat" (line-round), MIT. https://gentleface.com/icons/hat
import type { SVGProps } from 'react';

export function HatIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14.856 9.144C14.952 9.241 15 9.359 15 9.5C15 9.92 14.754 10.301 14.263 10.644C13.882 10.91 13.366 11.146 12.713 11.352C12.074 11.554 11.357 11.711 10.562 11.823C9.729 11.941 8.875 12 8 12C7.125 12 6.271 11.941 5.438 11.823C4.643 11.711 3.926 11.554 3.287 11.352C2.634 11.146 2.118 10.91 1.737 10.644C1.246 10.301 1 9.92 1 9.5C1 9.359 1.048 9.241 1.144 9.144C1.241 9.048 1.359 9 1.5 9L3.228 9C3.466 8.619 3.726 8.148 4.008 7.588L4.107 7.389C4.156 7.291 4.208 7.183 4.264 7.065L4.268 7.057C4.468 6.638 4.718 6.098 5.016 5.436C5.277 4.856 5.456 4.47 5.553 4.276C5.596 4.191 5.657 4.124 5.737 4.074C5.817 4.025 5.904 4 6 4C6.315 4 6.598 4.076 6.851 4.228C6.99 4.311 7.158 4.451 7.354 4.646C7.491 4.784 7.595 4.874 7.663 4.915C7.758 4.972 7.87 5 8 5C8.13 5 8.242 4.972 8.337 4.915C8.405 4.874 8.509 4.784 8.646 4.646C8.842 4.451 9.01 4.311 9.149 4.228C9.402 4.076 9.685 4 10 4C10.096 4 10.183 4.025 10.263 4.074C10.343 4.124 10.404 4.191 10.447 4.276C10.544 4.47 10.723 4.856 10.984 5.436C11.282 6.098 11.532 6.638 11.732 7.057C11.79 7.178 11.843 7.288 11.893 7.389L11.989 7.583L11.992 7.588C12.274 8.148 12.534 8.619 12.772 9L14.5 9C14.641 9 14.759 9.048 14.856 9.144ZM9.713 5.059L9.712 5.059C9.696 5.067 9.679 5.075 9.663 5.085C9.595 5.126 9.491 5.216 9.354 5.354C9.158 5.549 8.99 5.689 8.851 5.772C8.598 5.924 8.315 6 8 6C7.685 6 7.402 5.924 7.149 5.772C7.01 5.689 6.842 5.549 6.646 5.354C6.509 5.216 6.405 5.126 6.337 5.085C6.321 5.075 6.304 5.067 6.287 5.059L6.287 5.059C6.195 5.258 6.075 5.52 5.928 5.847C5.698 6.356 5.497 6.795 5.324 7.164C6.119 7.305 7.011 7.375 8 7.375C8.989 7.375 9.881 7.305 10.676 7.164C10.503 6.795 10.302 6.356 10.072 5.847C9.925 5.52 9.805 5.258 9.713 5.059ZM8 9.375C8.815 9.375 9.598 9.344 10.35 9.283C10.83 9.244 11.275 9.194 11.686 9.133C11.509 8.827 11.323 8.481 11.128 8.096C10.205 8.282 9.162 8.375 8 8.375C6.838 8.375 5.795 8.282 4.872 8.096C4.677 8.481 4.491 8.827 4.314 9.133C4.725 9.194 5.17 9.244 5.65 9.283C6.402 9.344 7.185 9.375 8 9.375ZM8 10.375C6.24 10.375 4.723 10.25 3.451 10L2.599 10C2.864 10.141 3.193 10.274 3.588 10.398C4.175 10.583 4.838 10.728 5.578 10.833C6.365 10.944 7.172 11 8 11C8.828 11 9.635 10.944 10.422 10.833C11.162 10.728 11.825 10.583 12.412 10.398C12.807 10.274 13.136 10.141 13.401 10L12.549 10C11.277 10.25 9.76 10.375 8 10.375Z" />
    </svg>
  );
}

Vue

Vue: see /icons/hat.md

Svelte

Svelte: see /icons/hat.md

HTML img

HTML img: see /icons/hat.md

CSS

CSS: see /icons/hat.md

Data URL

Data URL: see /icons/hat.md

Sprite

Sprite: see /icons/hat.md

SwiftUI

SwiftUI: see /icons/hat.md

Compose

Compose: see /icons/hat.md

Android XML

Android XML: see /icons/hat.md

Flutter

Flutter: see /icons/hat.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

hat

Tags

hat, fedora, headwear, brim, clothing, travel, summer

Category

Travel

Component name

HatIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

Family 2

hat-bowler hat-cowboy

More travel icons

backpack backpack-off baggage-claim beach bench campfire concierge-bell door-arrows door-hanger duffel-bag hot-air-balloon hot-bath hot-tub hotel houseboat luggage-cart · all travel icons

For agents

Metadata: /icons/hat.json · Markdown: /icons/hat.md · SVG: https://gentleface.com/svg/{style}/16/hat.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/hat.png

hat icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp