color fill icon

color-fill-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name
color-fill-20-regular
Set
Fluent UI System Icons
Style
20 Regular
Viewbox
20×20
License
MIT

10 other variants in Fluent UI System Icons

color-fill-16-filledcolor-fill-16-regularcolor-fill-20-filledcolor-fill-24-filledcolor-fill-24-regularcolor-fill-28-filledcolor-fill-28-regularcolor-fill-32-filledcolor-fill-32-lightcolor-fill-32-regular

The same icon in other sets

color-fillBoxIcons v2color-fillBoxIcons v2 Solidcolor-fillIonIcons

Related icons in Fluent UI System Icons

color-background-20-filledcolor-background-accent-20-regularcolor-fill-accent-16-regularcolor-line-16-filledcolor-line-accent-16-regularcolor-off-20-filled

Use the color fill icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M4.336 12H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2c0-.54-.213-1.029-.56-1.389a3.3 3.3 0 0 1-.466 1.162q.026.11.026.227v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1.336zm10.041-2.833l-.003.004c-.04.048-.151.178-.212.255c-.124.158-.29.38-.458.642C13.386 10.564 13 11.295 13 12c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642c-.055-.07-.158-.191-.208-.25l-.017-.02A.47.47 0 0 0 14.75 9a.5.5 0 0 0-.373.167m.373 1.14q.1.137.204.3c.306.478.546.998.546 1.393c0 .293-.1.566-.248.749a.62.62 0 0 1-.502.251a.62.62 0 0 1-.502-.251A1.2 1.2 0 0 1 14 12c0-.396.24-.915.546-1.393q.106-.162.204-.3M8.5 1a.5.5 0 0 0-.5.5v1.56a2 2 0 0 0-.8.49L3.664 7.086a2 2 0 0 0 0 2.828l2.829 2.829a2 2 0 0 0 2.828 0l3.536-3.536a2 2 0 0 0 0-2.828L10.028 3.55A2 2 0 0 0 9 3.002V1.5a.5.5 0 0 0-.5-.5M8 4.175V5.5a.5.5 0 0 0 1 0V4.042q.177.072.321.215l2.829 2.829c.12.12.202.262.249.414H4.664l3.243-3.243q.044-.045.093-.082M4.371 9.207a1 1 0 0 1-.293-.707h8.071l-3.535 3.536a1 1 0 0 1-1.414 0zm10.005-.04h.001Z"/></svg>

React

import type { SVGProps } from "react";

export function FluentColorFill20Regular(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="M4.336 12H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2c0-.54-.213-1.029-.56-1.389a3.3 3.3 0 0 1-.466 1.162q.026.11.026.227v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1.336zm10.041-2.833l-.003.004c-.04.048-.151.178-.212.255c-.124.158-.29.38-.458.642C13.386 10.564 13 11.295 13 12c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642c-.055-.07-.158-.191-.208-.25l-.017-.02A.47.47 0 0 0 14.75 9a.5.5 0 0 0-.373.167m.373 1.14q.1.137.204.3c.306.478.546.998.546 1.393c0 .293-.1.566-.248.749a.62.62 0 0 1-.502.251a.62.62 0 0 1-.502-.251A1.2 1.2 0 0 1 14 12c0-.396.24-.915.546-1.393q.106-.162.204-.3M8.5 1a.5.5 0 0 0-.5.5v1.56a2 2 0 0 0-.8.49L3.664 7.086a2 2 0 0 0 0 2.828l2.829 2.829a2 2 0 0 0 2.828 0l3.536-3.536a2 2 0 0 0 0-2.828L10.028 3.55A2 2 0 0 0 9 3.002V1.5a.5.5 0 0 0-.5-.5M8 4.175V5.5a.5.5 0 0 0 1 0V4.042q.177.072.321.215l2.829 2.829c.12.12.202.262.249.414H4.664l3.243-3.243q.044-.045.093-.082M4.371 9.207a1 1 0 0 1-.293-.707h8.071l-3.535 3.536a1 1 0 0 1-1.414 0zm10.005-.04h.001Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M4.336 12H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2c0-.54-.213-1.029-.56-1.389a3.3 3.3 0 0 1-.466 1.162q.026.11.026.227v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1.336zm10.041-2.833l-.003.004c-.04.048-.151.178-.212.255c-.124.158-.29.38-.458.642C13.386 10.564 13 11.295 13 12c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642c-.055-.07-.158-.191-.208-.25l-.017-.02A.47.47 0 0 0 14.75 9a.5.5 0 0 0-.373.167m.373 1.14q.1.137.204.3c.306.478.546.998.546 1.393c0 .293-.1.566-.248.749a.62.62 0 0 1-.502.251a.62.62 0 0 1-.502-.251A1.2 1.2 0 0 1 14 12c0-.396.24-.915.546-1.393q.106-.162.204-.3M8.5 1a.5.5 0 0 0-.5.5v1.56a2 2 0 0 0-.8.49L3.664 7.086a2 2 0 0 0 0 2.828l2.829 2.829a2 2 0 0 0 2.828 0l3.536-3.536a2 2 0 0 0 0-2.828L10.028 3.55A2 2 0 0 0 9 3.002V1.5a.5.5 0 0 0-.5-.5M8 4.175V5.5a.5.5 0 0 0 1 0V4.042q.177.072.321.215l2.829 2.829c.12.12.202.262.249.414H4.664l3.243-3.243q.044-.045.093-.082M4.371 9.207a1 1 0 0 1-.293-.707h8.071l-3.535 3.536a1 1 0 0 1-1.414 0zm10.005-.04h.001Z"/></svg>
</template>

CSS

.icon-color-fill-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%22M4.336%2012H4a2%202%200%200%200-2%202v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2c0-.54-.213-1.029-.56-1.389a3.3%203.3%200%200%201-.466%201.162q.026.11.026.227v2a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-2a1%201%200%200%201%201-1h1.336zm10.041-2.833l-.003.004c-.04.048-.151.178-.212.255c-.124.158-.29.38-.458.642C13.386%2010.564%2013%2011.295%2013%2012c0%201.009.672%202%201.75%202s1.75-.991%201.75-2c0-.705-.386-1.436-.704-1.932a8%208%200%200%200-.458-.642c-.055-.07-.158-.191-.208-.25l-.017-.02A.47.47%200%200%200%2014.75%209a.5.5%200%200%200-.373.167m.373%201.14q.1.137.204.3c.306.478.546.998.546%201.393c0%20.293-.1.566-.248.749a.62.62%200%200%201-.502.251a.62.62%200%200%201-.502-.251A1.2%201.2%200%200%201%2014%2012c0-.396.24-.915.546-1.393q.106-.162.204-.3M8.5%201a.5.5%200%200%200-.5.5v1.56a2%202%200%200%200-.8.49L3.664%207.086a2%202%200%200%200%200%202.828l2.829%202.829a2%202%200%200%200%202.828%200l3.536-3.536a2%202%200%200%200%200-2.828L10.028%203.55A2%202%200%200%200%209%203.002V1.5a.5.5%200%200%200-.5-.5M8%204.175V5.5a.5.5%200%200%200%201%200V4.042q.177.072.321.215l2.829%202.829c.12.12.202.262.249.414H4.664l3.243-3.243q.044-.045.093-.082M4.371%209.207a1%201%200%200%201-.293-.707h8.071l-3.535%203.536a1%201%200%200%201-1.414%200zm10.005-.04h.001Z%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%22M4.336%2012H4a2%202%200%200%200-2%202v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2c0-.54-.213-1.029-.56-1.389a3.3%203.3%200%200%201-.466%201.162q.026.11.026.227v2a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-2a1%201%200%200%201%201-1h1.336zm10.041-2.833l-.003.004c-.04.048-.151.178-.212.255c-.124.158-.29.38-.458.642C13.386%2010.564%2013%2011.295%2013%2012c0%201.009.672%202%201.75%202s1.75-.991%201.75-2c0-.705-.386-1.436-.704-1.932a8%208%200%200%200-.458-.642c-.055-.07-.158-.191-.208-.25l-.017-.02A.47.47%200%200%200%2014.75%209a.5.5%200%200%200-.373.167m.373%201.14q.1.137.204.3c.306.478.546.998.546%201.393c0%20.293-.1.566-.248.749a.62.62%200%200%201-.502.251a.62.62%200%200%201-.502-.251A1.2%201.2%200%200%201%2014%2012c0-.396.24-.915.546-1.393q.106-.162.204-.3M8.5%201a.5.5%200%200%200-.5.5v1.56a2%202%200%200%200-.8.49L3.664%207.086a2%202%200%200%200%200%202.828l2.829%202.829a2%202%200%200%200%202.828%200l3.536-3.536a2%202%200%200%200%200-2.828L10.028%203.55A2%202%200%200%200%209%203.002V1.5a.5.5%200%200%200-.5-.5M8%204.175V5.5a.5.5%200%200%200%201%200V4.042q.177.072.321.215l2.829%202.829c.12.12.202.262.249.414H4.664l3.243-3.243q.044-.045.093-.082M4.371%209.207a1%201%200%200%201-.293-.707h8.071l-3.535%203.536a1%201%200%200%201-1.414%200zm10.005-.04h.001Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/color-fill-20-regular.svg?color=%231a73e8&size=48