hard hat icon

hard-hat from Line Awesome by Icons8 · Line · Logistics · Apache-2.0 Free for personal and commercial use.

Name: hard-hat
Set: Line Awesome
Style: Line
Category: Logistics
Viewbox: 32×32
License: Apache 2.0
Aliases: hard-hat-solid

The same icon in other sets

hard-hatBoxIcons v2 hard-hatBoxIcons v2 Solid hard-hatFont Awesome Solid hard-hatHuge Icons hard-hatLucide hard-hatMaterial Design Icons hard-hatPhosphor hard-hatUnicons

More logistics icons from Line Awesome

box boxes clipboard-list dolly-flatbed pallet shipping-fast warehouse

Use the hard hat icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M13 7v1.406c-4.965 1.281-8.59 5.676-8.875 10.969C2.953 19.785 2 20.695 2 22v3h28v-3c0-1.305-.953-2.215-2.125-2.625c-.285-5.293-3.91-9.688-8.875-10.969V7zm2.031 2H17a1 1 0 0 0 0 .344V15h2v-4.5c3.738 1.18 6.566 4.473 6.969 8.5H24v2h3c.566 0 1 .434 1 1v1H4v-1c0-.566.434-1 1-1h3v-2H6.031c.403-4.027 3.23-7.32 6.969-8.5V15h2V9.5c.05-.16.063-.332.031-.5"/></svg>

React

import type { SVGProps } from "react";

export function LaHardHat(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M13 7v1.406c-4.965 1.281-8.59 5.676-8.875 10.969C2.953 19.785 2 20.695 2 22v3h28v-3c0-1.305-.953-2.215-2.125-2.625c-.285-5.293-3.91-9.688-8.875-10.969V7zm2.031 2H17a1 1 0 0 0 0 .344V15h2v-4.5c3.738 1.18 6.566 4.473 6.969 8.5H24v2h3c.566 0 1 .434 1 1v1H4v-1c0-.566.434-1 1-1h3v-2H6.031c.403-4.027 3.23-7.32 6.969-8.5V15h2V9.5c.05-.16.063-.332.031-.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M13 7v1.406c-4.965 1.281-8.59 5.676-8.875 10.969C2.953 19.785 2 20.695 2 22v3h28v-3c0-1.305-.953-2.215-2.125-2.625c-.285-5.293-3.91-9.688-8.875-10.969V7zm2.031 2H17a1 1 0 0 0 0 .344V15h2v-4.5c3.738 1.18 6.566 4.473 6.969 8.5H24v2h3c.566 0 1 .434 1 1v1H4v-1c0-.566.434-1 1-1h3v-2H6.031c.403-4.027 3.23-7.32 6.969-8.5V15h2V9.5c.05-.16.063-.332.031-.5"/></svg>
</template>

CSS

.icon-hard-hat {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13%207v1.406c-4.965%201.281-8.59%205.676-8.875%2010.969C2.953%2019.785%202%2020.695%202%2022v3h28v-3c0-1.305-.953-2.215-2.125-2.625c-.285-5.293-3.91-9.688-8.875-10.969V7zm2.031%202H17a1%201%200%200%200%200%20.344V15h2v-4.5c3.738%201.18%206.566%204.473%206.969%208.5H24v2h3c.566%200%201%20.434%201%201v1H4v-1c0-.566.434-1%201-1h3v-2H6.031c.403-4.027%203.23-7.32%206.969-8.5V15h2V9.5c.05-.16.063-.332.031-.5%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13%207v1.406c-4.965%201.281-8.59%205.676-8.875%2010.969C2.953%2019.785%202%2020.695%202%2022v3h28v-3c0-1.305-.953-2.215-2.125-2.625c-.285-5.293-3.91-9.688-8.875-10.969V7zm2.031%202H17a1%201%200%200%200%200%20.344V15h2v-4.5c3.738%201.18%206.566%204.473%206.969%208.5H24v2h3c.566%200%201%20.434%201%201v1H4v-1c0-.566.434-1%201-1h3v-2H6.031c.403-4.027%203.23-7.32%206.969-8.5V15h2V9.5c.05-.16.063-.332.031-.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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