color background icon
color-background-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.
- Name
- color-background-20-filled
- Set
- Fluent UI System Icons
- Style
- 20 Filled
- Viewbox
- 20×20
- License
- MIT
3 other variants in Fluent UI System Icons
Related icons in Fluent UI System Icons
Use the color background icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="m2 10.664l1.078 1.079a3 3 0 0 0 4.243 0l.68-.68C8.028 12.404 8.96 14 10.75 14c1.816 0 2.75-1.646 2.75-3c0-1.014-.532-1.956-.862-2.472a9 9 0 0 0-.516-.721l-.015-.019l-.214-.26l-.024-.027a1.5 1.5 0 0 0-.85-.477a3 3 0 0 0-.87-2.352L9.478 4H15.5A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zM5 1.5a.5.5 0 0 1 1 0v1.174c.48.022.954.217 1.32.583L9.443 5.38a2 2 0 0 1 0 2.828l-2.828 2.829a2 2 0 0 1-2.829 0L1.664 8.914a2 2 0 0 1 0-2.828l2.828-2.829c.153-.153.325-.276.508-.369zm0 4V4.164L2.664 6.5h6.32a1 1 0 0 0-.249-.414L6.614 3.964A1 1 0 0 0 6 3.676V5.5a.5.5 0 0 1-1 0m-2.922 2c0 .256.098.512.293.707l2.121 2.121a1 1 0 0 0 1.415 0L8.735 7.5zm8.299.667l-.215.26c-.125.157-.29.38-.458.64C9.385 9.565 9 10.296 9 11c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642l-.215-.259a.5.5 0 0 0-.746 0m.169 1.44q.104-.162.204-.3q.099.138.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 10 11c0-.396.24-.915.546-1.393"/></svg>
React
import type { SVGProps } from "react";
export function FluentColorBackground20Filled(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="m2 10.664l1.078 1.079a3 3 0 0 0 4.243 0l.68-.68C8.028 12.404 8.96 14 10.75 14c1.816 0 2.75-1.646 2.75-3c0-1.014-.532-1.956-.862-2.472a9 9 0 0 0-.516-.721l-.015-.019l-.214-.26l-.024-.027a1.5 1.5 0 0 0-.85-.477a3 3 0 0 0-.87-2.352L9.478 4H15.5A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zM5 1.5a.5.5 0 0 1 1 0v1.174c.48.022.954.217 1.32.583L9.443 5.38a2 2 0 0 1 0 2.828l-2.828 2.829a2 2 0 0 1-2.829 0L1.664 8.914a2 2 0 0 1 0-2.828l2.828-2.829c.153-.153.325-.276.508-.369zm0 4V4.164L2.664 6.5h6.32a1 1 0 0 0-.249-.414L6.614 3.964A1 1 0 0 0 6 3.676V5.5a.5.5 0 0 1-1 0m-2.922 2c0 .256.098.512.293.707l2.121 2.121a1 1 0 0 0 1.415 0L8.735 7.5zm8.299.667l-.215.26c-.125.157-.29.38-.458.64C9.385 9.565 9 10.296 9 11c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642l-.215-.259a.5.5 0 0 0-.746 0m.169 1.44q.104-.162.204-.3q.099.138.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 10 11c0-.396.24-.915.546-1.393"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="m2 10.664l1.078 1.079a3 3 0 0 0 4.243 0l.68-.68C8.028 12.404 8.96 14 10.75 14c1.816 0 2.75-1.646 2.75-3c0-1.014-.532-1.956-.862-2.472a9 9 0 0 0-.516-.721l-.015-.019l-.214-.26l-.024-.027a1.5 1.5 0 0 0-.85-.477a3 3 0 0 0-.87-2.352L9.478 4H15.5A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zM5 1.5a.5.5 0 0 1 1 0v1.174c.48.022.954.217 1.32.583L9.443 5.38a2 2 0 0 1 0 2.828l-2.828 2.829a2 2 0 0 1-2.829 0L1.664 8.914a2 2 0 0 1 0-2.828l2.828-2.829c.153-.153.325-.276.508-.369zm0 4V4.164L2.664 6.5h6.32a1 1 0 0 0-.249-.414L6.614 3.964A1 1 0 0 0 6 3.676V5.5a.5.5 0 0 1-1 0m-2.922 2c0 .256.098.512.293.707l2.121 2.121a1 1 0 0 0 1.415 0L8.735 7.5zm8.299.667l-.215.26c-.125.157-.29.38-.458.64C9.385 9.565 9 10.296 9 11c0 1.009.672 2 1.75 2s1.75-.991 1.75-2c0-.705-.386-1.436-.704-1.932a8 8 0 0 0-.458-.642l-.215-.259a.5.5 0 0 0-.746 0m.169 1.44q.104-.162.204-.3q.099.138.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 10 11c0-.396.24-.915.546-1.393"/></svg> </template>
CSS
.icon-color-background-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%22m2%2010.664l1.078%201.079a3%203%200%200%200%204.243%200l.68-.68C8.028%2012.404%208.96%2014%2010.75%2014c1.816%200%202.75-1.646%202.75-3c0-1.014-.532-1.956-.862-2.472a9%209%200%200%200-.516-.721l-.015-.019l-.214-.26l-.024-.027a1.5%201.5%200%200%200-.85-.477a3%203%200%200%200-.87-2.352L9.478%204H15.5A2.5%202.5%200%200%201%2018%206.5v7a2.5%202.5%200%200%201-2.5%202.5h-11A2.5%202.5%200%200%201%202%2013.5zM5%201.5a.5.5%200%200%201%201%200v1.174c.48.022.954.217%201.32.583L9.443%205.38a2%202%200%200%201%200%202.828l-2.828%202.829a2%202%200%200%201-2.829%200L1.664%208.914a2%202%200%200%201%200-2.828l2.828-2.829c.153-.153.325-.276.508-.369zm0%204V4.164L2.664%206.5h6.32a1%201%200%200%200-.249-.414L6.614%203.964A1%201%200%200%200%206%203.676V5.5a.5.5%200%200%201-1%200m-2.922%202c0%20.256.098.512.293.707l2.121%202.121a1%201%200%200%200%201.415%200L8.735%207.5zm8.299.667l-.215.26c-.125.157-.29.38-.458.64C9.385%209.565%209%2010.296%209%2011c0%201.009.672%202%201.75%202s1.75-.991%201.75-2c0-.705-.386-1.436-.704-1.932a8%208%200%200%200-.458-.642l-.215-.259a.5.5%200%200%200-.746%200m.169%201.44q.104-.162.204-.3q.099.138.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%2010%2011c0-.396.24-.915.546-1.393%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%22m2%2010.664l1.078%201.079a3%203%200%200%200%204.243%200l.68-.68C8.028%2012.404%208.96%2014%2010.75%2014c1.816%200%202.75-1.646%202.75-3c0-1.014-.532-1.956-.862-2.472a9%209%200%200%200-.516-.721l-.015-.019l-.214-.26l-.024-.027a1.5%201.5%200%200%200-.85-.477a3%203%200%200%200-.87-2.352L9.478%204H15.5A2.5%202.5%200%200%201%2018%206.5v7a2.5%202.5%200%200%201-2.5%202.5h-11A2.5%202.5%200%200%201%202%2013.5zM5%201.5a.5.5%200%200%201%201%200v1.174c.48.022.954.217%201.32.583L9.443%205.38a2%202%200%200%201%200%202.828l-2.828%202.829a2%202%200%200%201-2.829%200L1.664%208.914a2%202%200%200%201%200-2.828l2.828-2.829c.153-.153.325-.276.508-.369zm0%204V4.164L2.664%206.5h6.32a1%201%200%200%200-.249-.414L6.614%203.964A1%201%200%200%200%206%203.676V5.5a.5.5%200%200%201-1%200m-2.922%202c0%20.256.098.512.293.707l2.121%202.121a1%201%200%200%200%201.415%200L8.735%207.5zm8.299.667l-.215.26c-.125.157-.29.38-.458.64C9.385%209.565%209%2010.296%209%2011c0%201.009.672%202%201.75%202s1.75-.991%201.75-2c0-.705-.386-1.436-.704-1.932a8%208%200%200%200-.458-.642l-.215-.259a.5.5%200%200%200-.746%200m.169%201.44q.104-.162.204-.3q.099.138.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%2010%2011c0-.396.24-.915.546-1.393%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/color-background-20-filled.svg?color=%231a73e8&size=48
