color background icon
color-background-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- color-background-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- 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.664V13.5A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4H9.478l.671.672q.157.156.285.328H15.5A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 13.5v-1.836zM5 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.084.926l.215-.259a.5.5 0 0 1 .746 0l.215.26c.124.157.29.38.458.64c.318.497.704 1.228.704 1.933c0 1.009-.673 2-1.75 2C9.672 13 9 12.009 9 11c0-.705.386-1.436.704-1.932c.167-.261.333-.484.458-.642m.588.881a7 7 0 0 0-.204.3C10.24 10.085 10 10.605 10 11c0 .293.1.566.248.749a.62.62 0 0 0 .502.251a.62.62 0 0 0 .502-.251A1.22 1.22 0 0 0 11.5 11c0-.396-.24-.915-.546-1.393a7 7 0 0 0-.204-.3"/></svg>
React
import type { SVGProps } from "react";
export function FluentColorBackground20Regular(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.664V13.5A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4H9.478l.671.672q.157.156.285.328H15.5A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 13.5v-1.836zM5 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.084.926l.215-.259a.5.5 0 0 1 .746 0l.215.26c.124.157.29.38.458.64c.318.497.704 1.228.704 1.933c0 1.009-.673 2-1.75 2C9.672 13 9 12.009 9 11c0-.705.386-1.436.704-1.932c.167-.261.333-.484.458-.642m.588.881a7 7 0 0 0-.204.3C10.24 10.085 10 10.605 10 11c0 .293.1.566.248.749a.62.62 0 0 0 .502.251a.62.62 0 0 0 .502-.251A1.22 1.22 0 0 0 11.5 11c0-.396-.24-.915-.546-1.393a7 7 0 0 0-.204-.3"/></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.664V13.5A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4H9.478l.671.672q.157.156.285.328H15.5A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 13.5v-1.836zM5 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.084.926l.215-.259a.5.5 0 0 1 .746 0l.215.26c.124.157.29.38.458.64c.318.497.704 1.228.704 1.933c0 1.009-.673 2-1.75 2C9.672 13 9 12.009 9 11c0-.705.386-1.436.704-1.932c.167-.261.333-.484.458-.642m.588.881a7 7 0 0 0-.204.3C10.24 10.085 10 10.605 10 11c0 .293.1.566.248.749a.62.62 0 0 0 .502.251a.62.62 0 0 0 .502-.251A1.22 1.22 0 0 0 11.5 11c0-.396-.24-.915-.546-1.393a7 7 0 0 0-.204-.3"/></svg> </template>
CSS
.icon-color-background-20-regular {
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.664V13.5A2.5%202.5%200%200%200%204.5%2016h11a2.5%202.5%200%200%200%202.5-2.5v-7A2.5%202.5%200%200%200%2015.5%204H9.478l.671.672q.157.156.285.328H15.5A1.5%201.5%200%200%201%2017%206.5v7a1.5%201.5%200%200%201-1.5%201.5h-11A1.5%201.5%200%200%201%203%2013.5v-1.836zM5%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.084.926l.215-.259a.5.5%200%200%201%20.746%200l.215.26c.124.157.29.38.458.64c.318.497.704%201.228.704%201.933c0%201.009-.673%202-1.75%202C9.672%2013%209%2012.009%209%2011c0-.705.386-1.436.704-1.932c.167-.261.333-.484.458-.642m.588.881a7%207%200%200%200-.204.3C10.24%2010.085%2010%2010.605%2010%2011c0%20.293.1.566.248.749a.62.62%200%200%200%20.502.251a.62.62%200%200%200%20.502-.251A1.22%201.22%200%200%200%2011.5%2011c0-.396-.24-.915-.546-1.393a7%207%200%200%200-.204-.3%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.664V13.5A2.5%202.5%200%200%200%204.5%2016h11a2.5%202.5%200%200%200%202.5-2.5v-7A2.5%202.5%200%200%200%2015.5%204H9.478l.671.672q.157.156.285.328H15.5A1.5%201.5%200%200%201%2017%206.5v7a1.5%201.5%200%200%201-1.5%201.5h-11A1.5%201.5%200%200%201%203%2013.5v-1.836zM5%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.084.926l.215-.259a.5.5%200%200%201%20.746%200l.215.26c.124.157.29.38.458.64c.318.497.704%201.228.704%201.933c0%201.009-.673%202-1.75%202C9.672%2013%209%2012.009%209%2011c0-.705.386-1.436.704-1.932c.167-.261.333-.484.458-.642m.588.881a7%207%200%200%200-.204.3C10.24%2010.085%2010%2010.605%2010%2011c0%20.293.1.566.248.749a.62.62%200%200%200%20.502.251a.62.62%200%200%200%20.502-.251A1.22%201.22%200%200%200%2011.5%2011c0-.396-.24-.915-.546-1.393a7%207%200%200%200-.204-.3%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-regular.svg?color=%231a73e8&size=48
