color fill icon

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

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

10 other variants in Fluent UI System Icons

color-fill-16-filledcolor-fill-16-regularcolor-fill-20-filledcolor-fill-20-regularcolor-fill-24-filledcolor-fill-24-regularcolor-fill-28-filledcolor-fill-28-regularcolor-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 32 32"><path fill="currentColor" d="M18.981 19c-.196.459-.483 1.214-.483 2a4.5 4.5 0 0 0 9 0c0-.627-.18-1.234-.354-1.686A3.25 3.25 0 0 1 29 22.25v3.5A3.25 3.25 0 0 1 25.75 29H6.25A3.25 3.25 0 0 1 3 25.75v-3.5a3.25 3.25 0 0 1 2.999-3.24l2.209 2.208a6 6 0 0 0 8.485 0L18.911 19zM23 16a1 1 0 0 1 .823.432l.002.003l.005.007q.164.24.321.483c.194.298.453.71.714 1.159c.26.446.53.948.739 1.423c.19.434.396.99.396 1.493a3 3 0 1 1-6 0c0-.503.206-1.06.396-1.493c.21-.475.48-.977.739-1.423a28 28 0 0 1 1.035-1.642l.005-.007l.002-.002l.076-.097A1 1 0 0 1 23 16m-.135 3.088c-.24.415-.47.845-.636 1.223a4 4 0 0 0-.184.484q-.029.097-.038.154q-.009.058-.007.051a1 1 0 1 0 2 0q.002.006-.007-.05a2 2 0 0 0-.038-.155a4 4 0 0 0-.183-.484a13 13 0 0 0-.637-1.223L23 18.862zM13.5 3a1 1 0 0 1 1 1v2.133c.498.15.967.422 1.36.815l4.194 4.194a3.25 3.25 0 0 1 0 4.595l-5.304 5.304a3.25 3.25 0 0 1-4.596 0l-4.193-4.193a3.25 3.25 0 0 1 0-4.596l5.304-5.304c.36-.36.784-.618 1.235-.774V4a1 1 0 0 1 1-1m-1.932 16.627a1.25 1.25 0 0 0 1.768 0L16.963 16H7.94zM14.5 10a1 1 0 1 1-2 0V8.541l-5.125 5.125q-.15.152-.237.334h11.734a1.25 1.25 0 0 0-.232-1.444l-4.14-4.14z"/></svg>

React

import type { SVGProps } from "react";

export function FluentColorFill32Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M18.981 19c-.196.459-.483 1.214-.483 2a4.5 4.5 0 0 0 9 0c0-.627-.18-1.234-.354-1.686A3.25 3.25 0 0 1 29 22.25v3.5A3.25 3.25 0 0 1 25.75 29H6.25A3.25 3.25 0 0 1 3 25.75v-3.5a3.25 3.25 0 0 1 2.999-3.24l2.209 2.208a6 6 0 0 0 8.485 0L18.911 19zM23 16a1 1 0 0 1 .823.432l.002.003l.005.007q.164.24.321.483c.194.298.453.71.714 1.159c.26.446.53.948.739 1.423c.19.434.396.99.396 1.493a3 3 0 1 1-6 0c0-.503.206-1.06.396-1.493c.21-.475.48-.977.739-1.423a28 28 0 0 1 1.035-1.642l.005-.007l.002-.002l.076-.097A1 1 0 0 1 23 16m-.135 3.088c-.24.415-.47.845-.636 1.223a4 4 0 0 0-.184.484q-.029.097-.038.154q-.009.058-.007.051a1 1 0 1 0 2 0q.002.006-.007-.05a2 2 0 0 0-.038-.155a4 4 0 0 0-.183-.484a13 13 0 0 0-.637-1.223L23 18.862zM13.5 3a1 1 0 0 1 1 1v2.133c.498.15.967.422 1.36.815l4.194 4.194a3.25 3.25 0 0 1 0 4.595l-5.304 5.304a3.25 3.25 0 0 1-4.596 0l-4.193-4.193a3.25 3.25 0 0 1 0-4.596l5.304-5.304c.36-.36.784-.618 1.235-.774V4a1 1 0 0 1 1-1m-1.932 16.627a1.25 1.25 0 0 0 1.768 0L16.963 16H7.94zM14.5 10a1 1 0 1 1-2 0V8.541l-5.125 5.125q-.15.152-.237.334h11.734a1.25 1.25 0 0 0-.232-1.444l-4.14-4.14z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M18.981 19c-.196.459-.483 1.214-.483 2a4.5 4.5 0 0 0 9 0c0-.627-.18-1.234-.354-1.686A3.25 3.25 0 0 1 29 22.25v3.5A3.25 3.25 0 0 1 25.75 29H6.25A3.25 3.25 0 0 1 3 25.75v-3.5a3.25 3.25 0 0 1 2.999-3.24l2.209 2.208a6 6 0 0 0 8.485 0L18.911 19zM23 16a1 1 0 0 1 .823.432l.002.003l.005.007q.164.24.321.483c.194.298.453.71.714 1.159c.26.446.53.948.739 1.423c.19.434.396.99.396 1.493a3 3 0 1 1-6 0c0-.503.206-1.06.396-1.493c.21-.475.48-.977.739-1.423a28 28 0 0 1 1.035-1.642l.005-.007l.002-.002l.076-.097A1 1 0 0 1 23 16m-.135 3.088c-.24.415-.47.845-.636 1.223a4 4 0 0 0-.184.484q-.029.097-.038.154q-.009.058-.007.051a1 1 0 1 0 2 0q.002.006-.007-.05a2 2 0 0 0-.038-.155a4 4 0 0 0-.183-.484a13 13 0 0 0-.637-1.223L23 18.862zM13.5 3a1 1 0 0 1 1 1v2.133c.498.15.967.422 1.36.815l4.194 4.194a3.25 3.25 0 0 1 0 4.595l-5.304 5.304a3.25 3.25 0 0 1-4.596 0l-4.193-4.193a3.25 3.25 0 0 1 0-4.596l5.304-5.304c.36-.36.784-.618 1.235-.774V4a1 1 0 0 1 1-1m-1.932 16.627a1.25 1.25 0 0 0 1.768 0L16.963 16H7.94zM14.5 10a1 1 0 1 1-2 0V8.541l-5.125 5.125q-.15.152-.237.334h11.734a1.25 1.25 0 0 0-.232-1.444l-4.14-4.14z"/></svg>
</template>

CSS

.icon-color-fill-32-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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.981%2019c-.196.459-.483%201.214-.483%202a4.5%204.5%200%200%200%209%200c0-.627-.18-1.234-.354-1.686A3.25%203.25%200%200%201%2029%2022.25v3.5A3.25%203.25%200%200%201%2025.75%2029H6.25A3.25%203.25%200%200%201%203%2025.75v-3.5a3.25%203.25%200%200%201%202.999-3.24l2.209%202.208a6%206%200%200%200%208.485%200L18.911%2019zM23%2016a1%201%200%200%201%20.823.432l.002.003l.005.007q.164.24.321.483c.194.298.453.71.714%201.159c.26.446.53.948.739%201.423c.19.434.396.99.396%201.493a3%203%200%201%201-6%200c0-.503.206-1.06.396-1.493c.21-.475.48-.977.739-1.423a28%2028%200%200%201%201.035-1.642l.005-.007l.002-.002l.076-.097A1%201%200%200%201%2023%2016m-.135%203.088c-.24.415-.47.845-.636%201.223a4%204%200%200%200-.184.484q-.029.097-.038.154q-.009.058-.007.051a1%201%200%201%200%202%200q.002.006-.007-.05a2%202%200%200%200-.038-.155a4%204%200%200%200-.183-.484a13%2013%200%200%200-.637-1.223L23%2018.862zM13.5%203a1%201%200%200%201%201%201v2.133c.498.15.967.422%201.36.815l4.194%204.194a3.25%203.25%200%200%201%200%204.595l-5.304%205.304a3.25%203.25%200%200%201-4.596%200l-4.193-4.193a3.25%203.25%200%200%201%200-4.596l5.304-5.304c.36-.36.784-.618%201.235-.774V4a1%201%200%200%201%201-1m-1.932%2016.627a1.25%201.25%200%200%200%201.768%200L16.963%2016H7.94zM14.5%2010a1%201%200%201%201-2%200V8.541l-5.125%205.125q-.15.152-.237.334h11.734a1.25%201.25%200%200%200-.232-1.444l-4.14-4.14z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.981%2019c-.196.459-.483%201.214-.483%202a4.5%204.5%200%200%200%209%200c0-.627-.18-1.234-.354-1.686A3.25%203.25%200%200%201%2029%2022.25v3.5A3.25%203.25%200%200%201%2025.75%2029H6.25A3.25%203.25%200%200%201%203%2025.75v-3.5a3.25%203.25%200%200%201%202.999-3.24l2.209%202.208a6%206%200%200%200%208.485%200L18.911%2019zM23%2016a1%201%200%200%201%20.823.432l.002.003l.005.007q.164.24.321.483c.194.298.453.71.714%201.159c.26.446.53.948.739%201.423c.19.434.396.99.396%201.493a3%203%200%201%201-6%200c0-.503.206-1.06.396-1.493c.21-.475.48-.977.739-1.423a28%2028%200%200%201%201.035-1.642l.005-.007l.002-.002l.076-.097A1%201%200%200%201%2023%2016m-.135%203.088c-.24.415-.47.845-.636%201.223a4%204%200%200%200-.184.484q-.029.097-.038.154q-.009.058-.007.051a1%201%200%201%200%202%200q.002.006-.007-.05a2%202%200%200%200-.038-.155a4%204%200%200%200-.183-.484a13%2013%200%200%200-.637-1.223L23%2018.862zM13.5%203a1%201%200%200%201%201%201v2.133c.498.15.967.422%201.36.815l4.194%204.194a3.25%203.25%200%200%201%200%204.595l-5.304%205.304a3.25%203.25%200%200%201-4.596%200l-4.193-4.193a3.25%203.25%200%200%201%200-4.596l5.304-5.304c.36-.36.784-.618%201.235-.774V4a1%201%200%200%201%201-1m-1.932%2016.627a1.25%201.25%200%200%200%201.768%200L16.963%2016H7.94zM14.5%2010a1%201%200%201%201-2%200V8.541l-5.125%205.125q-.15.152-.237.334h11.734a1.25%201.25%200%200%200-.232-1.444l-4.14-4.14z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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