color background icon
color-background-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.
- Name
- color-background-24-filled
- Set
- Fluent UI System Icons
- Style
- 24 Filled
- Viewbox
- 24×24
- 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 24 24"><path fill="currentColor" d="M2 12.414V17.5A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4h-8.944l2.422 2.422a3 3 0 0 1 .719 3.09c.38.042.75.21 1.04.501l.003.002l.003.004l.01.009l.02.02a8 8 0 0 1 .311.338c.192.216.45.525.712.89c.26.36.545.808.77 1.3c.22.478.434 1.106.434 1.799C17 16.23 15.606 18 13.5 18S10 16.23 10 14.375c0-.29.037-.569.097-.83l-1.362 1.362a3 3 0 0 1-4.243 0zm9.342.58c-.188.409-.342.888-.342 1.381C11 15.765 12.029 17 13.5 17c1.47 0 2.5-1.235 2.5-2.625c0-.493-.154-.972-.342-1.381a7 7 0 0 0-.674-1.134a10 10 0 0 0-.649-.812l-.305-.328a.75.75 0 0 0-1.06 0l-.006.005c-.058.062-.214.226-.3.323c-.175.199-.411.48-.649.812a7 7 0 0 0-.673 1.134m2.158-.61q.13.162.265.35c.202.281.392.586.53.886c.14.305.205.56.205.755c0 .691-.481 1.125-1 1.125c-.52 0-1-.434-1-1.125c0-.194.064-.45.205-.755c.137-.3.327-.605.529-.886q.136-.188.266-.35M6.75 1a.75.75 0 0 0-.75.75v1.756l-.093.087l-4.243 4.243a2 2 0 0 0 0 2.828L5.199 14.2a2 2 0 0 0 2.829 0l4.243-4.243a2 2 0 0 0 0-2.828L8.735 3.593A2 2 0 0 0 7.5 3.015V1.75A.75.75 0 0 0 6.75 1M6 5.621v.629a.75.75 0 1 0 1.5 0V4.54a.5.5 0 0 1 .174.114l3.536 3.535c.09.09.138.205.145.322H3.11zm.26 7.518l-3.128-3.128h6.964l-3.129 3.128a.5.5 0 0 1-.707 0"/></svg>
React
import type { SVGProps } from "react";
export function FluentColorBackground24Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12.414V17.5A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4h-8.944l2.422 2.422a3 3 0 0 1 .719 3.09c.38.042.75.21 1.04.501l.003.002l.003.004l.01.009l.02.02a8 8 0 0 1 .311.338c.192.216.45.525.712.89c.26.36.545.808.77 1.3c.22.478.434 1.106.434 1.799C17 16.23 15.606 18 13.5 18S10 16.23 10 14.375c0-.29.037-.569.097-.83l-1.362 1.362a3 3 0 0 1-4.243 0zm9.342.58c-.188.409-.342.888-.342 1.381C11 15.765 12.029 17 13.5 17c1.47 0 2.5-1.235 2.5-2.625c0-.493-.154-.972-.342-1.381a7 7 0 0 0-.674-1.134a10 10 0 0 0-.649-.812l-.305-.328a.75.75 0 0 0-1.06 0l-.006.005c-.058.062-.214.226-.3.323c-.175.199-.411.48-.649.812a7 7 0 0 0-.673 1.134m2.158-.61q.13.162.265.35c.202.281.392.586.53.886c.14.305.205.56.205.755c0 .691-.481 1.125-1 1.125c-.52 0-1-.434-1-1.125c0-.194.064-.45.205-.755c.137-.3.327-.605.529-.886q.136-.188.266-.35M6.75 1a.75.75 0 0 0-.75.75v1.756l-.093.087l-4.243 4.243a2 2 0 0 0 0 2.828L5.199 14.2a2 2 0 0 0 2.829 0l4.243-4.243a2 2 0 0 0 0-2.828L8.735 3.593A2 2 0 0 0 7.5 3.015V1.75A.75.75 0 0 0 6.75 1M6 5.621v.629a.75.75 0 1 0 1.5 0V4.54a.5.5 0 0 1 .174.114l3.536 3.535c.09.09.138.205.145.322H3.11zm.26 7.518l-3.128-3.128h6.964l-3.129 3.128a.5.5 0 0 1-.707 0"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12.414V17.5A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4h-8.944l2.422 2.422a3 3 0 0 1 .719 3.09c.38.042.75.21 1.04.501l.003.002l.003.004l.01.009l.02.02a8 8 0 0 1 .311.338c.192.216.45.525.712.89c.26.36.545.808.77 1.3c.22.478.434 1.106.434 1.799C17 16.23 15.606 18 13.5 18S10 16.23 10 14.375c0-.29.037-.569.097-.83l-1.362 1.362a3 3 0 0 1-4.243 0zm9.342.58c-.188.409-.342.888-.342 1.381C11 15.765 12.029 17 13.5 17c1.47 0 2.5-1.235 2.5-2.625c0-.493-.154-.972-.342-1.381a7 7 0 0 0-.674-1.134a10 10 0 0 0-.649-.812l-.305-.328a.75.75 0 0 0-1.06 0l-.006.005c-.058.062-.214.226-.3.323c-.175.199-.411.48-.649.812a7 7 0 0 0-.673 1.134m2.158-.61q.13.162.265.35c.202.281.392.586.53.886c.14.305.205.56.205.755c0 .691-.481 1.125-1 1.125c-.52 0-1-.434-1-1.125c0-.194.064-.45.205-.755c.137-.3.327-.605.529-.886q.136-.188.266-.35M6.75 1a.75.75 0 0 0-.75.75v1.756l-.093.087l-4.243 4.243a2 2 0 0 0 0 2.828L5.199 14.2a2 2 0 0 0 2.829 0l4.243-4.243a2 2 0 0 0 0-2.828L8.735 3.593A2 2 0 0 0 7.5 3.015V1.75A.75.75 0 0 0 6.75 1M6 5.621v.629a.75.75 0 1 0 1.5 0V4.54a.5.5 0 0 1 .174.114l3.536 3.535c.09.09.138.205.145.322H3.11zm.26 7.518l-3.128-3.128h6.964l-3.129 3.128a.5.5 0 0 1-.707 0"/></svg> </template>
CSS
.icon-color-background-24-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2%2012.414V17.5A2.5%202.5%200%200%200%204.5%2020h15a2.5%202.5%200%200%200%202.5-2.5v-11A2.5%202.5%200%200%200%2019.5%204h-8.944l2.422%202.422a3%203%200%200%201%20.719%203.09c.38.042.75.21%201.04.501l.003.002l.003.004l.01.009l.02.02a8%208%200%200%201%20.311.338c.192.216.45.525.712.89c.26.36.545.808.77%201.3c.22.478.434%201.106.434%201.799C17%2016.23%2015.606%2018%2013.5%2018S10%2016.23%2010%2014.375c0-.29.037-.569.097-.83l-1.362%201.362a3%203%200%200%201-4.243%200zm9.342.58c-.188.409-.342.888-.342%201.381C11%2015.765%2012.029%2017%2013.5%2017c1.47%200%202.5-1.235%202.5-2.625c0-.493-.154-.972-.342-1.381a7%207%200%200%200-.674-1.134a10%2010%200%200%200-.649-.812l-.305-.328a.75.75%200%200%200-1.06%200l-.006.005c-.058.062-.214.226-.3.323c-.175.199-.411.48-.649.812a7%207%200%200%200-.673%201.134m2.158-.61q.13.162.265.35c.202.281.392.586.53.886c.14.305.205.56.205.755c0%20.691-.481%201.125-1%201.125c-.52%200-1-.434-1-1.125c0-.194.064-.45.205-.755c.137-.3.327-.605.529-.886q.136-.188.266-.35M6.75%201a.75.75%200%200%200-.75.75v1.756l-.093.087l-4.243%204.243a2%202%200%200%200%200%202.828L5.199%2014.2a2%202%200%200%200%202.829%200l4.243-4.243a2%202%200%200%200%200-2.828L8.735%203.593A2%202%200%200%200%207.5%203.015V1.75A.75.75%200%200%200%206.75%201M6%205.621v.629a.75.75%200%201%200%201.5%200V4.54a.5.5%200%200%201%20.174.114l3.536%203.535c.09.09.138.205.145.322H3.11zm.26%207.518l-3.128-3.128h6.964l-3.129%203.128a.5.5%200%200%201-.707%200%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2%2012.414V17.5A2.5%202.5%200%200%200%204.5%2020h15a2.5%202.5%200%200%200%202.5-2.5v-11A2.5%202.5%200%200%200%2019.5%204h-8.944l2.422%202.422a3%203%200%200%201%20.719%203.09c.38.042.75.21%201.04.501l.003.002l.003.004l.01.009l.02.02a8%208%200%200%201%20.311.338c.192.216.45.525.712.89c.26.36.545.808.77%201.3c.22.478.434%201.106.434%201.799C17%2016.23%2015.606%2018%2013.5%2018S10%2016.23%2010%2014.375c0-.29.037-.569.097-.83l-1.362%201.362a3%203%200%200%201-4.243%200zm9.342.58c-.188.409-.342.888-.342%201.381C11%2015.765%2012.029%2017%2013.5%2017c1.47%200%202.5-1.235%202.5-2.625c0-.493-.154-.972-.342-1.381a7%207%200%200%200-.674-1.134a10%2010%200%200%200-.649-.812l-.305-.328a.75.75%200%200%200-1.06%200l-.006.005c-.058.062-.214.226-.3.323c-.175.199-.411.48-.649.812a7%207%200%200%200-.673%201.134m2.158-.61q.13.162.265.35c.202.281.392.586.53.886c.14.305.205.56.205.755c0%20.691-.481%201.125-1%201.125c-.52%200-1-.434-1-1.125c0-.194.064-.45.205-.755c.137-.3.327-.605.529-.886q.136-.188.266-.35M6.75%201a.75.75%200%200%200-.75.75v1.756l-.093.087l-4.243%204.243a2%202%200%200%200%200%202.828L5.199%2014.2a2%202%200%200%200%202.829%200l4.243-4.243a2%202%200%200%200%200-2.828L8.735%203.593A2%202%200%200%200%207.5%203.015V1.75A.75.75%200%200%200%206.75%201M6%205.621v.629a.75.75%200%201%200%201.5%200V4.54a.5.5%200%200%201%20.174.114l3.536%203.535c.09.09.138.205.145.322H3.11zm.26%207.518l-3.128-3.128h6.964l-3.129%203.128a.5.5%200%200%201-.707%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/color-background-24-filled.svg?color=%231a73e8&size=48
