gavel icon

gavel from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: gavel
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

gavel-bold gavel-duotone gavel-fill gavel-light gavel-thin

The same icon in other sets

gavelFont Awesome 6 Solid gavelFont Awesome Solid gavel-16-filledFluent UI System Icons gavelHuge Icons gavelIconPark gavelIconPark Outline gavelIconPark Solid gavelIconPark TwoTone gavelLine Awesome gavelLucide gavelMaterial Symbols gavelMaterial Symbols Light gavelMaterial Design Icons gavelTabler Icons

Use the gavel icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m243.32 116.69l-16-16a16 16 0 0 0-20.84-1.53l-49.64-49.64a16 16 0 0 0-1.52-20.84l-16-16a16 16 0 0 0-22.63 0l-64 64a16 16 0 0 0 0 22.63l16 16a16 16 0 0 0 20.83 1.52l7.17 7.17l-65.38 65.38a25 25 0 0 0 35.32 35.32L132 159.32l7.17 7.16a16 16 0 0 0 1.52 20.84l16 16a16 16 0 0 0 22.63 0l64-64a16 16 0 0 0 0-22.63M80 104L64 88l64-64l16 16ZM55.32 213.38a9 9 0 0 1-12.69 0a9 9 0 0 1 0-12.68L108 135.32L120.69 148ZM101 105.66L145.66 61L195 110.34L150.35 155ZM168 192l-16-16l4-4l56-56l4-4l16 16Z"/></svg>

React

import type { SVGProps } from "react";

export function PhGavel(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m243.32 116.69l-16-16a16 16 0 0 0-20.84-1.53l-49.64-49.64a16 16 0 0 0-1.52-20.84l-16-16a16 16 0 0 0-22.63 0l-64 64a16 16 0 0 0 0 22.63l16 16a16 16 0 0 0 20.83 1.52l7.17 7.17l-65.38 65.38a25 25 0 0 0 35.32 35.32L132 159.32l7.17 7.16a16 16 0 0 0 1.52 20.84l16 16a16 16 0 0 0 22.63 0l64-64a16 16 0 0 0 0-22.63M80 104L64 88l64-64l16 16ZM55.32 213.38a9 9 0 0 1-12.69 0a9 9 0 0 1 0-12.68L108 135.32L120.69 148ZM101 105.66L145.66 61L195 110.34L150.35 155ZM168 192l-16-16l4-4l56-56l4-4l16 16Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m243.32 116.69l-16-16a16 16 0 0 0-20.84-1.53l-49.64-49.64a16 16 0 0 0-1.52-20.84l-16-16a16 16 0 0 0-22.63 0l-64 64a16 16 0 0 0 0 22.63l16 16a16 16 0 0 0 20.83 1.52l7.17 7.17l-65.38 65.38a25 25 0 0 0 35.32 35.32L132 159.32l7.17 7.16a16 16 0 0 0 1.52 20.84l16 16a16 16 0 0 0 22.63 0l64-64a16 16 0 0 0 0-22.63M80 104L64 88l64-64l16 16ZM55.32 213.38a9 9 0 0 1-12.69 0a9 9 0 0 1 0-12.68L108 135.32L120.69 148ZM101 105.66L145.66 61L195 110.34L150.35 155ZM168 192l-16-16l4-4l56-56l4-4l16 16Z"/></svg>
</template>

CSS

.icon-gavel {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m243.32%20116.69l-16-16a16%2016%200%200%200-20.84-1.53l-49.64-49.64a16%2016%200%200%200-1.52-20.84l-16-16a16%2016%200%200%200-22.63%200l-64%2064a16%2016%200%200%200%200%2022.63l16%2016a16%2016%200%200%200%2020.83%201.52l7.17%207.17l-65.38%2065.38a25%2025%200%200%200%2035.32%2035.32L132%20159.32l7.17%207.16a16%2016%200%200%200%201.52%2020.84l16%2016a16%2016%200%200%200%2022.63%200l64-64a16%2016%200%200%200%200-22.63M80%20104L64%2088l64-64l16%2016ZM55.32%20213.38a9%209%200%200%201-12.69%200a9%209%200%200%201%200-12.68L108%20135.32L120.69%20148ZM101%20105.66L145.66%2061L195%20110.34L150.35%20155ZM168%20192l-16-16l4-4l56-56l4-4l16%2016Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m243.32%20116.69l-16-16a16%2016%200%200%200-20.84-1.53l-49.64-49.64a16%2016%200%200%200-1.52-20.84l-16-16a16%2016%200%200%200-22.63%200l-64%2064a16%2016%200%200%200%200%2022.63l16%2016a16%2016%200%200%200%2020.83%201.52l7.17%207.17l-65.38%2065.38a25%2025%200%200%200%2035.32%2035.32L132%20159.32l7.17%207.16a16%2016%200%200%200%201.52%2020.84l16%2016a16%2016%200%200%200%2022.63%200l64-64a16%2016%200%200%200%200-22.63M80%20104L64%2088l64-64l16%2016ZM55.32%20213.38a9%209%200%200%201-12.69%200a9%209%200%200%201%200-12.68L108%20135.32L120.69%20148ZM101%20105.66L145.66%2061L195%20110.34L150.35%20155ZM168%20192l-16-16l4-4l56-56l4-4l16%2016Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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