gavel icon

gavel from Material Symbols by Google · Regular · Social · Apache-2.0 Free for personal and commercial use.

Name: gavel
Set: Material Symbols
Style: Regular
Category: Social
Viewbox: 24×24
License: Apache 2.0
Aliases: gavel-outline, gavel-outline-sharp, gavel-sharp

1 other variant in Material Symbols

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 Light gavelMaterial Design Icons gavelPhosphor gavelTabler Icons

More social icons from Material Symbols

Use the gavel icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21v-2h12v2zm5.65-4.85L4 10.5l2.1-2.15L11.8 14zM16 9.8l-5.65-5.7L12.5 2l5.65 5.65zM20.6 20L7.55 6.95l1.4-1.4L22 18.6z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsGavel(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21v-2h12v2zm5.65-4.85L4 10.5l2.1-2.15L11.8 14zM16 9.8l-5.65-5.7L12.5 2l5.65 5.65zM20.6 20L7.55 6.95l1.4-1.4L22 18.6z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21v-2h12v2zm5.65-4.85L4 10.5l2.1-2.15L11.8 14zM16 9.8l-5.65-5.7L12.5 2l5.65 5.65zM20.6 20L7.55 6.95l1.4-1.4L22 18.6z"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2021v-2h12v2zm5.65-4.85L4%2010.5l2.1-2.15L11.8%2014zM16%209.8l-5.65-5.7L12.5%202l5.65%205.65zM20.6%2020L7.55%206.95l1.4-1.4L22%2018.6z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2021v-2h12v2zm5.65-4.85L4%2010.5l2.1-2.15L11.8%2014zM16%209.8l-5.65-5.7L12.5%202l5.65%205.65zM20.6%2020L7.55%206.95l1.4-1.4L22%2018.6z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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