color fill icon

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

Name
color-fill-32-light
Set
Fluent UI System Icons
Style
32 Light
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-filledcolor-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="M14 3.5a.5.5 0 0 0-1 0v2.552a3.24 3.24 0 0 0-1.702.897l-5.346 5.347a3.25 3.25 0 0 0 0 4.596l4.153 4.153a3.25 3.25 0 0 0 4.596 0l5.346-5.347a3.25 3.25 0 0 0 0-4.596L15.895 6.95A3.24 3.24 0 0 0 14 6.023zm-1 3.578V9.5a.5.5 0 0 0 1 0V7.034a2.24 2.24 0 0 1 1.187.623l4.153 4.152A2.25 2.25 0 0 1 19.918 14H6.08c.1-.365.293-.71.58-.997l5.346-5.346c.287-.287.63-.48.995-.58M6.66 16.184A2.24 2.24 0 0 1 6.037 15H19.33l-5.337 5.338a2.25 2.25 0 0 1-3.182 0zm15.531.248a.974.974 0 0 1 1.62 0a28 28 0 0 1 1.342 2.19c.224.417.432.843.585 1.238c.148.385.263.787.263 1.139a3 3 0 1 1-6 0c0-.352.115-.754.263-1.139c.153-.395.36-.821.585-1.237c.45-.833.986-1.662 1.342-2.191m.81.587a26 26 0 0 0-1.272 2.078c-.213.396-.4.782-.532 1.123c-.136.353-.196.615-.196.779a2 2 0 1 0 4 0c0-.164-.06-.426-.196-.779a10 10 0 0 0-.532-1.123A26 26 0 0 0 23 17.02m5 5.23a2.24 2.24 0 0 0-.505-1.42c-.03-.573-.207-1.115-.359-1.509l-.005-.014A3.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.952-3.236l.986.986H6.25A2.25 2.25 0 0 0 4 22.25v3.5A2.25 2.25 0 0 0 6.25 28h19.5A2.25 2.25 0 0 0 28 25.75z"/></svg>

React

import type { SVGProps } from "react";

export function FluentColorFill32Light(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="M14 3.5a.5.5 0 0 0-1 0v2.552a3.24 3.24 0 0 0-1.702.897l-5.346 5.347a3.25 3.25 0 0 0 0 4.596l4.153 4.153a3.25 3.25 0 0 0 4.596 0l5.346-5.347a3.25 3.25 0 0 0 0-4.596L15.895 6.95A3.24 3.24 0 0 0 14 6.023zm-1 3.578V9.5a.5.5 0 0 0 1 0V7.034a2.24 2.24 0 0 1 1.187.623l4.153 4.152A2.25 2.25 0 0 1 19.918 14H6.08c.1-.365.293-.71.58-.997l5.346-5.346c.287-.287.63-.48.995-.58M6.66 16.184A2.24 2.24 0 0 1 6.037 15H19.33l-5.337 5.338a2.25 2.25 0 0 1-3.182 0zm15.531.248a.974.974 0 0 1 1.62 0a28 28 0 0 1 1.342 2.19c.224.417.432.843.585 1.238c.148.385.263.787.263 1.139a3 3 0 1 1-6 0c0-.352.115-.754.263-1.139c.153-.395.36-.821.585-1.237c.45-.833.986-1.662 1.342-2.191m.81.587a26 26 0 0 0-1.272 2.078c-.213.396-.4.782-.532 1.123c-.136.353-.196.615-.196.779a2 2 0 1 0 4 0c0-.164-.06-.426-.196-.779a10 10 0 0 0-.532-1.123A26 26 0 0 0 23 17.02m5 5.23a2.24 2.24 0 0 0-.505-1.42c-.03-.573-.207-1.115-.359-1.509l-.005-.014A3.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.952-3.236l.986.986H6.25A2.25 2.25 0 0 0 4 22.25v3.5A2.25 2.25 0 0 0 6.25 28h19.5A2.25 2.25 0 0 0 28 25.75z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M14 3.5a.5.5 0 0 0-1 0v2.552a3.24 3.24 0 0 0-1.702.897l-5.346 5.347a3.25 3.25 0 0 0 0 4.596l4.153 4.153a3.25 3.25 0 0 0 4.596 0l5.346-5.347a3.25 3.25 0 0 0 0-4.596L15.895 6.95A3.24 3.24 0 0 0 14 6.023zm-1 3.578V9.5a.5.5 0 0 0 1 0V7.034a2.24 2.24 0 0 1 1.187.623l4.153 4.152A2.25 2.25 0 0 1 19.918 14H6.08c.1-.365.293-.71.58-.997l5.346-5.346c.287-.287.63-.48.995-.58M6.66 16.184A2.24 2.24 0 0 1 6.037 15H19.33l-5.337 5.338a2.25 2.25 0 0 1-3.182 0zm15.531.248a.974.974 0 0 1 1.62 0a28 28 0 0 1 1.342 2.19c.224.417.432.843.585 1.238c.148.385.263.787.263 1.139a3 3 0 1 1-6 0c0-.352.115-.754.263-1.139c.153-.395.36-.821.585-1.237c.45-.833.986-1.662 1.342-2.191m.81.587a26 26 0 0 0-1.272 2.078c-.213.396-.4.782-.532 1.123c-.136.353-.196.615-.196.779a2 2 0 1 0 4 0c0-.164-.06-.426-.196-.779a10 10 0 0 0-.532-1.123A26 26 0 0 0 23 17.02m5 5.23a2.24 2.24 0 0 0-.505-1.42c-.03-.573-.207-1.115-.359-1.509l-.005-.014A3.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.952-3.236l.986.986H6.25A2.25 2.25 0 0 0 4 22.25v3.5A2.25 2.25 0 0 0 6.25 28h19.5A2.25 2.25 0 0 0 28 25.75z"/></svg>
</template>

CSS

.icon-color-fill-32-light {
  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%22M14%203.5a.5.5%200%200%200-1%200v2.552a3.24%203.24%200%200%200-1.702.897l-5.346%205.347a3.25%203.25%200%200%200%200%204.596l4.153%204.153a3.25%203.25%200%200%200%204.596%200l5.346-5.347a3.25%203.25%200%200%200%200-4.596L15.895%206.95A3.24%203.24%200%200%200%2014%206.023zm-1%203.578V9.5a.5.5%200%200%200%201%200V7.034a2.24%202.24%200%200%201%201.187.623l4.153%204.152A2.25%202.25%200%200%201%2019.918%2014H6.08c.1-.365.293-.71.58-.997l5.346-5.346c.287-.287.63-.48.995-.58M6.66%2016.184A2.24%202.24%200%200%201%206.037%2015H19.33l-5.337%205.338a2.25%202.25%200%200%201-3.182%200zm15.531.248a.974.974%200%200%201%201.62%200a28%2028%200%200%201%201.342%202.19c.224.417.432.843.585%201.238c.148.385.263.787.263%201.139a3%203%200%201%201-6%200c0-.352.115-.754.263-1.139c.153-.395.36-.821.585-1.237c.45-.833.986-1.662%201.342-2.191m.81.587a26%2026%200%200%200-1.272%202.078c-.213.396-.4.782-.532%201.123c-.136.353-.196.615-.196.779a2%202%200%201%200%204%200c0-.164-.06-.426-.196-.779a10%2010%200%200%200-.532-1.123A26%2026%200%200%200%2023%2017.02m5%205.23a2.24%202.24%200%200%200-.505-1.42c-.03-.573-.207-1.115-.359-1.509l-.005-.014A3.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.952-3.236l.986.986H6.25A2.25%202.25%200%200%200%204%2022.25v3.5A2.25%202.25%200%200%200%206.25%2028h19.5A2.25%202.25%200%200%200%2028%2025.75z%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%22M14%203.5a.5.5%200%200%200-1%200v2.552a3.24%203.24%200%200%200-1.702.897l-5.346%205.347a3.25%203.25%200%200%200%200%204.596l4.153%204.153a3.25%203.25%200%200%200%204.596%200l5.346-5.347a3.25%203.25%200%200%200%200-4.596L15.895%206.95A3.24%203.24%200%200%200%2014%206.023zm-1%203.578V9.5a.5.5%200%200%200%201%200V7.034a2.24%202.24%200%200%201%201.187.623l4.153%204.152A2.25%202.25%200%200%201%2019.918%2014H6.08c.1-.365.293-.71.58-.997l5.346-5.346c.287-.287.63-.48.995-.58M6.66%2016.184A2.24%202.24%200%200%201%206.037%2015H19.33l-5.337%205.338a2.25%202.25%200%200%201-3.182%200zm15.531.248a.974.974%200%200%201%201.62%200a28%2028%200%200%201%201.342%202.19c.224.417.432.843.585%201.238c.148.385.263.787.263%201.139a3%203%200%201%201-6%200c0-.352.115-.754.263-1.139c.153-.395.36-.821.585-1.237c.45-.833.986-1.662%201.342-2.191m.81.587a26%2026%200%200%200-1.272%202.078c-.213.396-.4.782-.532%201.123c-.136.353-.196.615-.196.779a2%202%200%201%200%204%200c0-.164-.06-.426-.196-.779a10%2010%200%200%200-.532-1.123A26%2026%200%200%200%2023%2017.02m5%205.23a2.24%202.24%200%200%200-.505-1.42c-.03-.573-.207-1.115-.359-1.509l-.005-.014A3.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.952-3.236l.986.986H6.25A2.25%202.25%200%200%200%204%2022.25v3.5A2.25%202.25%200%200%200%206.25%2028h19.5A2.25%202.25%200%200%200%2028%2025.75z%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-light.svg?color=%231a73e8&size=48