gentleface

Gentleface › Tools › hard-hat

hard-hat icon

Hard hat: hard hat, safety helmet. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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 10.144C14.952 10.241 15 10.359 15 10.5L15 12.5C15 12.641 14.952 12.759 14.856 12.856C14.759 12.952 14.641 13 14.5 13L1.5 13C1.359 13 1.241 12.952 1.144 12.856C1.048 12.759 1 12.641 1 12.5L1 10.5C1 10.359 1.048 10.241 1.144 10.144C1.241 10.048 1.359 10 1.5 10L2 10C2 9.365 2.098 8.745 2.295 8.141C2.503 7.504 2.809 6.917 3.214 6.382C3.618 5.847 4.099 5.392 4.656 5.018C5.077 4.735 5.525 4.51 6 4.343L6 3.5C6 3.309 6.035 3.125 6.105 2.948C6.182 2.755 6.293 2.586 6.439 2.439C6.586 2.293 6.755 2.182 6.948 2.105C7.125 2.035 7.309 2 7.5 2L8.5 2C8.691 2 8.875 2.035 9.052 2.105C9.245 2.182 9.414 2.293 9.561 2.439C9.707 2.586 9.818 2.755 9.895 2.948C9.965 3.125 10 3.309 10 3.5L10 4.343C10.475 4.51 10.923 4.735 11.344 5.018C11.901 5.392 12.382 5.847 12.786 6.382C13.191 6.917 13.497 7.504 13.705 8.141C13.902 8.745 14 9.365 14 10L14.5 10C14.641 10 14.759 10.048 14.856 10.144ZM8.854 3.146C8.756 3.049 8.638 3 8.5 3L7.5 3C7.362 3 7.244 3.049 7.146 3.146C7.049 3.244 7 3.362 7 3.5L7 10L9 10L9 3.5C9 3.362 8.951 3.244 8.854 3.146ZM6 5.417C5.726 5.536 5.464 5.68 5.213 5.849C4.749 6.16 4.349 6.539 4.011 6.985C3.674 7.431 3.419 7.92 3.246 8.451C3.082 8.954 3 9.471 3 10L6 10L6 5.417ZM12.754 8.451C12.581 7.92 12.326 7.431 11.989 6.985C11.651 6.539 11.251 6.16 10.787 5.849C10.536 5.68 10.274 5.536 10 5.417L10 10L13 10C13 9.471 12.918 8.954 12.754 8.451ZM14 11L2 11L2 12L14 12L14 11Z"/></svg>
React
// Gentleface "hard-hat" (line-round), MIT. https://gentleface.com/icons/hard-hat
import type { SVGProps } from 'react';

export function HardHatIcon(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 10.144C14.952 10.241 15 10.359 15 10.5L15 12.5C15 12.641 14.952 12.759 14.856 12.856C14.759 12.952 14.641 13 14.5 13L1.5 13C1.359 13 1.241 12.952 1.144 12.856C1.048 12.759 1 12.641 1 12.5L1 10.5C1 10.359 1.048 10.241 1.144 10.144C1.241 10.048 1.359 10 1.5 10L2 10C2 9.365 2.098 8.745 2.295 8.141C2.503 7.504 2.809 6.917 3.214 6.382C3.618 5.847 4.099 5.392 4.656 5.018C5.077 4.735 5.525 4.51 6 4.343L6 3.5C6 3.309 6.035 3.125 6.105 2.948C6.182 2.755 6.293 2.586 6.439 2.439C6.586 2.293 6.755 2.182 6.948 2.105C7.125 2.035 7.309 2 7.5 2L8.5 2C8.691 2 8.875 2.035 9.052 2.105C9.245 2.182 9.414 2.293 9.561 2.439C9.707 2.586 9.818 2.755 9.895 2.948C9.965 3.125 10 3.309 10 3.5L10 4.343C10.475 4.51 10.923 4.735 11.344 5.018C11.901 5.392 12.382 5.847 12.786 6.382C13.191 6.917 13.497 7.504 13.705 8.141C13.902 8.745 14 9.365 14 10L14.5 10C14.641 10 14.759 10.048 14.856 10.144ZM8.854 3.146C8.756 3.049 8.638 3 8.5 3L7.5 3C7.362 3 7.244 3.049 7.146 3.146C7.049 3.244 7 3.362 7 3.5L7 10L9 10L9 3.5C9 3.362 8.951 3.244 8.854 3.146ZM6 5.417C5.726 5.536 5.464 5.68 5.213 5.849C4.749 6.16 4.349 6.539 4.011 6.985C3.674 7.431 3.419 7.92 3.246 8.451C3.082 8.954 3 9.471 3 10L6 10L6 5.417ZM12.754 8.451C12.581 7.92 12.326 7.431 11.989 6.985C11.651 6.539 11.251 6.16 10.787 5.849C10.536 5.68 10.274 5.536 10 5.417L10 10L13 10C13 9.471 12.918 8.954 12.754 8.451ZM14 11L2 11L2 12L14 12L14 11Z" />
    </svg>
  );
}
Vue
Vue: see /icons/hard-hat.md
Svelte
Svelte: see /icons/hard-hat.md
HTML img
HTML img: see /icons/hard-hat.md
CSS
CSS: see /icons/hard-hat.md
Data URL
Data URL: see /icons/hard-hat.md
Sprite
Sprite: see /icons/hard-hat.md
SwiftUI
SwiftUI: see /icons/hard-hat.md
Compose
Compose: see /icons/hard-hat.md
Android XML
Android XML: see /icons/hard-hat.md
Flutter
Flutter: see /icons/hard-hat.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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.

With npm: import { HardHatIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
hard hat, safety helmet
Tags
hard-hat, safety-helmet, helmet, hardhat, construction, worker, builder, engineer, contractor, safety, site
Category
Tools
Component name
HardHatIcon
History
  • released in 0.2.0
  • added
Since
version 0.2.0

More tools icons

anvil axe construction crane drill hammer ladder pickaxe scissors screwdriver shovel spirit-level tape-measure toolbox tools tools-upright · all tools icons

For agents

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