gauge icon
gauge-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- gauge-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
7 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
Use the gauge icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12.466 5.057a.5.5 0 0 1-.647.284a5.001 5.001 0 0 0-5.355 8.195a.5.5 0 1 1-.707.707a6 6 0 0 1 6.425-9.834a.5.5 0 0 1 .284.648m2.478 2.477a.5.5 0 0 1 .647.285a6 6 0 0 1-1.348 6.424a.5.5 0 1 1-.707-.707a5 5 0 0 0 1.123-5.354a.5.5 0 0 1 .284-.648m-.859-1.715a.5.5 0 0 0-.635-.011l-.177.14a335 335 0 0 0-1.91 1.531c-.532.431-1.078.877-1.513 1.242c-.218.182-.41.346-.56.478a4 4 0 0 0-.344.328a1.5 1.5 0 1 0 2.282 1.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301 301 0 0 0 1.213-2.126l.111-.196a.5.5 0 0 0-.11-.626M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14"/></svg>
React
import type { SVGProps } from "react";
export function FluentGauge20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12.466 5.057a.5.5 0 0 1-.647.284a5.001 5.001 0 0 0-5.355 8.195a.5.5 0 1 1-.707.707a6 6 0 0 1 6.425-9.834a.5.5 0 0 1 .284.648m2.478 2.477a.5.5 0 0 1 .647.285a6 6 0 0 1-1.348 6.424a.5.5 0 1 1-.707-.707a5 5 0 0 0 1.123-5.354a.5.5 0 0 1 .284-.648m-.859-1.715a.5.5 0 0 0-.635-.011l-.177.14a335 335 0 0 0-1.91 1.531c-.532.431-1.078.877-1.513 1.242c-.218.182-.41.346-.56.478a4 4 0 0 0-.344.328a1.5 1.5 0 1 0 2.282 1.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301 301 0 0 0 1.213-2.126l.111-.196a.5.5 0 0 0-.11-.626M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12.466 5.057a.5.5 0 0 1-.647.284a5.001 5.001 0 0 0-5.355 8.195a.5.5 0 1 1-.707.707a6 6 0 0 1 6.425-9.834a.5.5 0 0 1 .284.648m2.478 2.477a.5.5 0 0 1 .647.285a6 6 0 0 1-1.348 6.424a.5.5 0 1 1-.707-.707a5 5 0 0 0 1.123-5.354a.5.5 0 0 1 .284-.648m-.859-1.715a.5.5 0 0 0-.635-.011l-.177.14a335 335 0 0 0-1.91 1.531c-.532.431-1.078.877-1.513 1.242c-.218.182-.41.346-.56.478a4 4 0 0 0-.344.328a1.5 1.5 0 1 0 2.282 1.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301 301 0 0 0 1.213-2.126l.111-.196a.5.5 0 0 0-.11-.626M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14"/></svg> </template>
CSS
.icon-gauge-20-regular {
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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.466%205.057a.5.5%200%200%201-.647.284a5.001%205.001%200%200%200-5.355%208.195a.5.5%200%201%201-.707.707a6%206%200%200%201%206.425-9.834a.5.5%200%200%201%20.284.648m2.478%202.477a.5.5%200%200%201%20.647.285a6%206%200%200%201-1.348%206.424a.5.5%200%201%201-.707-.707a5%205%200%200%200%201.123-5.354a.5.5%200%200%201%20.284-.648m-.859-1.715a.5.5%200%200%200-.635-.011l-.177.14a335%20335%200%200%200-1.91%201.531c-.532.431-1.078.877-1.513%201.242c-.218.182-.41.346-.56.478a4%204%200%200%200-.344.328a1.5%201.5%200%201%200%202.282%201.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301%20301%200%200%200%201.213-2.126l.111-.196a.5.5%200%200%200-.11-.626M10%2018a8%208%200%201%200%200-16a8%208%200%200%200%200%2016m0-1a7%207%200%201%201%200-14a7%207%200%200%201%200%2014%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.466%205.057a.5.5%200%200%201-.647.284a5.001%205.001%200%200%200-5.355%208.195a.5.5%200%201%201-.707.707a6%206%200%200%201%206.425-9.834a.5.5%200%200%201%20.284.648m2.478%202.477a.5.5%200%200%201%20.647.285a6%206%200%200%201-1.348%206.424a.5.5%200%201%201-.707-.707a5%205%200%200%200%201.123-5.354a.5.5%200%200%201%20.284-.648m-.859-1.715a.5.5%200%200%200-.635-.011l-.177.14a335%20335%200%200%200-1.91%201.531c-.532.431-1.078.877-1.513%201.242c-.218.182-.41.346-.56.478a4%204%200%200%200-.344.328a1.5%201.5%200%201%200%202.282%201.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301%20301%200%200%200%201.213-2.126l.111-.196a.5.5%200%200%200-.11-.626M10%2018a8%208%200%201%200%200-16a8%208%200%200%200%200%2016m0-1a7%207%200%201%201%200-14a7%207%200%200%201%200%2014%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/gauge-20-regular.svg?color=%231a73e8&size=48
