symbols icon
symbols-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- symbols-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
5 other variants in Fluent UI System Icons
Use the symbols icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14.142 7.974a.5.5 0 0 0 .707 0l2.553-2.553a1.99 1.99 0 0 0 .014-2.83a2.005 2.005 0 0 0-2.84-.003l-.08.08l-.08-.079a2.002 2.002 0 0 0-2.83 2.83zm-1.848-3.262a1 1 0 1 1 1.416-1.416l.786.787l.498-.5l.287-.286a1.005 1.005 0 0 1 1.424-.002a.99.99 0 0 1-.002 1.412l-2.207 2.207zM2 5.502a3.5 3.5 0 1 1 7 .001a3.5 3.5 0 0 1-7 0m3.5-2.499c-.51 0-.983.152-1.379.414l3.465 3.464A2.5 2.5 0 0 0 5.5 3.003M3 5.503a2.5 2.5 0 0 0 3.879 2.085L3.414 4.124A2.5 2.5 0 0 0 3 5.503m9.335 7.747a2.5 2.5 0 0 1 4.166-.249h-1.003a.5.5 0 1 0 0 1H17.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v.55a3.5 3.5 0 0 0-5.53.698a.5.5 0 0 0 .865.501M12 16.948v.552a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5h2a.5.5 0 1 1 0 1h-1a2.5 2.5 0 0 0 4.167-.251a.5.5 0 0 1 .866.5a3.5 3.5 0 0 1-5.534.699M5.5 11a.5.5 0 0 1 .5.5V14h2.5a.5.5 0 1 1 0 1H6v2.5a.5.5 0 0 1-1 0V15H2.5a.5.5 0 1 1 0-1H5v-2.5a.5.5 0 0 1 .5-.5"/></svg>
React
import type { SVGProps } from "react";
export function FluentSymbols20Regular(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="M14.142 7.974a.5.5 0 0 0 .707 0l2.553-2.553a1.99 1.99 0 0 0 .014-2.83a2.005 2.005 0 0 0-2.84-.003l-.08.08l-.08-.079a2.002 2.002 0 0 0-2.83 2.83zm-1.848-3.262a1 1 0 1 1 1.416-1.416l.786.787l.498-.5l.287-.286a1.005 1.005 0 0 1 1.424-.002a.99.99 0 0 1-.002 1.412l-2.207 2.207zM2 5.502a3.5 3.5 0 1 1 7 .001a3.5 3.5 0 0 1-7 0m3.5-2.499c-.51 0-.983.152-1.379.414l3.465 3.464A2.5 2.5 0 0 0 5.5 3.003M3 5.503a2.5 2.5 0 0 0 3.879 2.085L3.414 4.124A2.5 2.5 0 0 0 3 5.503m9.335 7.747a2.5 2.5 0 0 1 4.166-.249h-1.003a.5.5 0 1 0 0 1H17.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v.55a3.5 3.5 0 0 0-5.53.698a.5.5 0 0 0 .865.501M12 16.948v.552a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5h2a.5.5 0 1 1 0 1h-1a2.5 2.5 0 0 0 4.167-.251a.5.5 0 0 1 .866.5a3.5 3.5 0 0 1-5.534.699M5.5 11a.5.5 0 0 1 .5.5V14h2.5a.5.5 0 1 1 0 1H6v2.5a.5.5 0 0 1-1 0V15H2.5a.5.5 0 1 1 0-1H5v-2.5a.5.5 0 0 1 .5-.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14.142 7.974a.5.5 0 0 0 .707 0l2.553-2.553a1.99 1.99 0 0 0 .014-2.83a2.005 2.005 0 0 0-2.84-.003l-.08.08l-.08-.079a2.002 2.002 0 0 0-2.83 2.83zm-1.848-3.262a1 1 0 1 1 1.416-1.416l.786.787l.498-.5l.287-.286a1.005 1.005 0 0 1 1.424-.002a.99.99 0 0 1-.002 1.412l-2.207 2.207zM2 5.502a3.5 3.5 0 1 1 7 .001a3.5 3.5 0 0 1-7 0m3.5-2.499c-.51 0-.983.152-1.379.414l3.465 3.464A2.5 2.5 0 0 0 5.5 3.003M3 5.503a2.5 2.5 0 0 0 3.879 2.085L3.414 4.124A2.5 2.5 0 0 0 3 5.503m9.335 7.747a2.5 2.5 0 0 1 4.166-.249h-1.003a.5.5 0 1 0 0 1H17.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v.55a3.5 3.5 0 0 0-5.53.698a.5.5 0 0 0 .865.501M12 16.948v.552a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5h2a.5.5 0 1 1 0 1h-1a2.5 2.5 0 0 0 4.167-.251a.5.5 0 0 1 .866.5a3.5 3.5 0 0 1-5.534.699M5.5 11a.5.5 0 0 1 .5.5V14h2.5a.5.5 0 1 1 0 1H6v2.5a.5.5 0 0 1-1 0V15H2.5a.5.5 0 1 1 0-1H5v-2.5a.5.5 0 0 1 .5-.5"/></svg> </template>
CSS
.icon-symbols-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%22M14.142%207.974a.5.5%200%200%200%20.707%200l2.553-2.553a1.99%201.99%200%200%200%20.014-2.83a2.005%202.005%200%200%200-2.84-.003l-.08.08l-.08-.079a2.002%202.002%200%200%200-2.83%202.83zm-1.848-3.262a1%201%200%201%201%201.416-1.416l.786.787l.498-.5l.287-.286a1.005%201.005%200%200%201%201.424-.002a.99.99%200%200%201-.002%201.412l-2.207%202.207zM2%205.502a3.5%203.5%200%201%201%207%20.001a3.5%203.5%200%200%201-7%200m3.5-2.499c-.51%200-.983.152-1.379.414l3.465%203.464A2.5%202.5%200%200%200%205.5%203.003M3%205.503a2.5%202.5%200%200%200%203.879%202.085L3.414%204.124A2.5%202.5%200%200%200%203%205.503m9.335%207.747a2.5%202.5%200%200%201%204.166-.249h-1.003a.5.5%200%201%200%200%201H17.5a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-1%200v.55a3.5%203.5%200%200%200-5.53.698a.5.5%200%200%200%20.865.501M12%2016.948v.552a.5.5%200%200%201-1%200v-2a.5.5%200%200%201%20.5-.5h2a.5.5%200%201%201%200%201h-1a2.5%202.5%200%200%200%204.167-.251a.5.5%200%200%201%20.866.5a3.5%203.5%200%200%201-5.534.699M5.5%2011a.5.5%200%200%201%20.5.5V14h2.5a.5.5%200%201%201%200%201H6v2.5a.5.5%200%200%201-1%200V15H2.5a.5.5%200%201%201%200-1H5v-2.5a.5.5%200%200%201%20.5-.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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.142%207.974a.5.5%200%200%200%20.707%200l2.553-2.553a1.99%201.99%200%200%200%20.014-2.83a2.005%202.005%200%200%200-2.84-.003l-.08.08l-.08-.079a2.002%202.002%200%200%200-2.83%202.83zm-1.848-3.262a1%201%200%201%201%201.416-1.416l.786.787l.498-.5l.287-.286a1.005%201.005%200%200%201%201.424-.002a.99.99%200%200%201-.002%201.412l-2.207%202.207zM2%205.502a3.5%203.5%200%201%201%207%20.001a3.5%203.5%200%200%201-7%200m3.5-2.499c-.51%200-.983.152-1.379.414l3.465%203.464A2.5%202.5%200%200%200%205.5%203.003M3%205.503a2.5%202.5%200%200%200%203.879%202.085L3.414%204.124A2.5%202.5%200%200%200%203%205.503m9.335%207.747a2.5%202.5%200%200%201%204.166-.249h-1.003a.5.5%200%201%200%200%201H17.5a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-1%200v.55a3.5%203.5%200%200%200-5.53.698a.5.5%200%200%200%20.865.501M12%2016.948v.552a.5.5%200%200%201-1%200v-2a.5.5%200%200%201%20.5-.5h2a.5.5%200%201%201%200%201h-1a2.5%202.5%200%200%200%204.167-.251a.5.5%200%200%201%20.866.5a3.5%203.5%200%200%201-5.534.699M5.5%2011a.5.5%200%200%201%20.5.5V14h2.5a.5.5%200%201%201%200%201H6v2.5a.5.5%200%200%201-1%200V15H2.5a.5.5%200%201%201%200-1H5v-2.5a.5.5%200%200%201%20.5-.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/symbols-20-regular.svg?color=%231a73e8&size=48
