gavel icon

gavel-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: gavel-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

gavel gavel-bold gavel-duotone gavel-fill 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="m241.91 118.1l-16-16a14 14 0 0 0-19.55-.23l-52.23-52.23a14 14 0 0 0-.23-19.55l-16-16a14 14 0 0 0-19.8 0l-64 64a14 14 0 0 0 0 19.8l16 16a14 14 0 0 0 19.55.23l9.87 9.88l-66.79 66.79a23 23 0 0 0 32.48 32.49L132 156.49l9.87 9.87a14 14 0 0 0 .23 19.55l16 16a14 14 0 0 0 19.8 0l64-64a14 14 0 0 0 .01-19.81m-91.56 39.76l-52.21-52.2l47.52-47.52l52.2 52.2Zm-71.76-52.45l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83l-64 64a2 2 0 0 1-2.83 0M56.73 214.8a11 11 0 0 1-15.52-15.52L108 132.49L123.52 148Zm176.69-85.38l-64 64a2 2 0 0 1-2.83 0l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83"/></svg>

React

import type { SVGProps } from "react";

export function PhGavelLight(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="m241.91 118.1l-16-16a14 14 0 0 0-19.55-.23l-52.23-52.23a14 14 0 0 0-.23-19.55l-16-16a14 14 0 0 0-19.8 0l-64 64a14 14 0 0 0 0 19.8l16 16a14 14 0 0 0 19.55.23l9.87 9.88l-66.79 66.79a23 23 0 0 0 32.48 32.49L132 156.49l9.87 9.87a14 14 0 0 0 .23 19.55l16 16a14 14 0 0 0 19.8 0l64-64a14 14 0 0 0 .01-19.81m-91.56 39.76l-52.21-52.2l47.52-47.52l52.2 52.2Zm-71.76-52.45l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83l-64 64a2 2 0 0 1-2.83 0M56.73 214.8a11 11 0 0 1-15.52-15.52L108 132.49L123.52 148Zm176.69-85.38l-64 64a2 2 0 0 1-2.83 0l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m241.91 118.1l-16-16a14 14 0 0 0-19.55-.23l-52.23-52.23a14 14 0 0 0-.23-19.55l-16-16a14 14 0 0 0-19.8 0l-64 64a14 14 0 0 0 0 19.8l16 16a14 14 0 0 0 19.55.23l9.87 9.88l-66.79 66.79a23 23 0 0 0 32.48 32.49L132 156.49l9.87 9.87a14 14 0 0 0 .23 19.55l16 16a14 14 0 0 0 19.8 0l64-64a14 14 0 0 0 .01-19.81m-91.56 39.76l-52.21-52.2l47.52-47.52l52.2 52.2Zm-71.76-52.45l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83l-64 64a2 2 0 0 1-2.83 0M56.73 214.8a11 11 0 0 1-15.52-15.52L108 132.49L123.52 148Zm176.69-85.38l-64 64a2 2 0 0 1-2.83 0l-16-16a2 2 0 0 1 0-2.83l64-64a2 2 0 0 1 2.83 0l16 16a2 2 0 0 1 0 2.83"/></svg>
</template>

CSS

.icon-gavel-light {
  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%22m241.91%20118.1l-16-16a14%2014%200%200%200-19.55-.23l-52.23-52.23a14%2014%200%200%200-.23-19.55l-16-16a14%2014%200%200%200-19.8%200l-64%2064a14%2014%200%200%200%200%2019.8l16%2016a14%2014%200%200%200%2019.55.23l9.87%209.88l-66.79%2066.79a23%2023%200%200%200%2032.48%2032.49L132%20156.49l9.87%209.87a14%2014%200%200%200%20.23%2019.55l16%2016a14%2014%200%200%200%2019.8%200l64-64a14%2014%200%200%200%20.01-19.81m-91.56%2039.76l-52.21-52.2l47.52-47.52l52.2%2052.2Zm-71.76-52.45l-16-16a2%202%200%200%201%200-2.83l64-64a2%202%200%200%201%202.83%200l16%2016a2%202%200%200%201%200%202.83l-64%2064a2%202%200%200%201-2.83%200M56.73%20214.8a11%2011%200%200%201-15.52-15.52L108%20132.49L123.52%20148Zm176.69-85.38l-64%2064a2%202%200%200%201-2.83%200l-16-16a2%202%200%200%201%200-2.83l64-64a2%202%200%200%201%202.83%200l16%2016a2%202%200%200%201%200%202.83%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%22m241.91%20118.1l-16-16a14%2014%200%200%200-19.55-.23l-52.23-52.23a14%2014%200%200%200-.23-19.55l-16-16a14%2014%200%200%200-19.8%200l-64%2064a14%2014%200%200%200%200%2019.8l16%2016a14%2014%200%200%200%2019.55.23l9.87%209.88l-66.79%2066.79a23%2023%200%200%200%2032.48%2032.49L132%20156.49l9.87%209.87a14%2014%200%200%200%20.23%2019.55l16%2016a14%2014%200%200%200%2019.8%200l64-64a14%2014%200%200%200%20.01-19.81m-91.56%2039.76l-52.21-52.2l47.52-47.52l52.2%2052.2Zm-71.76-52.45l-16-16a2%202%200%200%201%200-2.83l64-64a2%202%200%200%201%202.83%200l16%2016a2%202%200%200%201%200%202.83l-64%2064a2%202%200%200%201-2.83%200M56.73%20214.8a11%2011%200%200%201-15.52-15.52L108%20132.49L123.52%20148Zm176.69-85.38l-64%2064a2%202%200%200%201-2.83%200l-16-16a2%202%200%200%201%200-2.83l64-64a2%202%200%200%201%202.83%200l16%2016a2%202%200%200%201%200%202.83%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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