color fill icon

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

Name
color-fill-20-filled
Set
Fluent UI System Icons
Style
20 Filled
Viewbox
20×20
License
MIT

10 other variants in Fluent UI System Icons

color-fill-16-filledcolor-fill-16-regularcolor-fill-20-regularcolor-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="M12 12c0 1.354.934 3 2.75 3c1.549 0 2.456-1.197 2.69-2.389A2 2 0 0 1 18 14v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.336l1.45 1.45a3 3 0 0 0 4.242 0l1.45-1.45zm2.377-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 FluentColorFill20Filled(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 12c0 1.354.934 3 2.75 3c1.549 0 2.456-1.197 2.69-2.389A2 2 0 0 1 18 14v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.336l1.45 1.45a3 3 0 0 0 4.242 0l1.45-1.45zm2.377-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="M12 12c0 1.354.934 3 2.75 3c1.549 0 2.456-1.197 2.69-2.389A2 2 0 0 1 18 14v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.336l1.45 1.45a3 3 0 0 0 4.242 0l1.45-1.45zm2.377-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-filled {
  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%2012c0%201.354.934%203%202.75%203c1.549%200%202.456-1.197%202.69-2.389A2%202%200%200%201%2018%2014v2a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2v-2a2%202%200%200%201%202-2h.336l1.45%201.45a3%203%200%200%200%204.242%200l1.45-1.45zm2.377-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%22M12%2012c0%201.354.934%203%202.75%203c1.549%200%202.456-1.197%202.69-2.389A2%202%200%200%201%2018%2014v2a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2v-2a2%202%200%200%201%202-2h.336l1.45%201.45a3%203%200%200%200%204.242%200l1.45-1.45zm2.377-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-filled.svg?color=%231a73e8&size=48