Color Background icon
Used in edit mode for color changes. The Color Background icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Color Background icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { ColorBackground24Regular, ColorBackground24Filled } from "@fluentui/react-icons";
export function Example() {
return <ColorBackground24Regular aria-label="Color Background" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_color_background_24_regular.svg" width="24" height="24" alt="Color Background"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3416 12.9938C11.1539 13.4027 10.9998 13.8816 10.9998 14.375C10.9998 15.1097 11.287 15.8008 11.7749 16.2893C12.2105 16.7255 12.806 17.0002 13.5 17.0002C14.9711 17.0002 16 15.7657 16 14.3752C16 13.8818 15.8459 13.4029 15.6582 12.994C15.4675 12.5786 15.2202 12.1883 14.9842 11.8597C14.7469 11.5291 14.5112 11.2473 14.3353 11.0484L14.0303 10.7199L14.0285 10.7181C13.7355 10.4268 13.2618 10.4273 12.9694 10.7197L12.964 10.7254C12.9059 10.7868 12.7499 10.9515 12.6645 11.0481C12.4886 11.247 12.2529 11.5289 12.0155 11.8595C11.7796 12.1881 11.5322 12.5784 11.3416 12.9938ZM13.7655 12.7343C13.9671 13.015 14.1572 13.32 14.2947 13.6195C14.4351 13.9253 14.4998 14.1808 14.4998 14.375C14.4998 15.0663 14.0188 15.5 13.4998 15.5C13.2494 15.5 13.0079 15.3991 12.825 15.2171C12.6288 15.0217 12.5 14.733 12.5 14.3752C12.5 14.1811 12.5647 13.9256 12.7051 13.6198C12.8425 13.3203 13.0327 13.0153 13.2342 12.7345C13.324 12.6095 13.4142 12.4919 13.5 12.3847C13.5857 12.4918 13.6758 12.6093 13.7655 12.7343ZM6.7497 1C6.33548 1 5.9997 1.33579 5.9997 1.75V3.50567C5.96796 3.53365 5.93689 3.56281 5.90655 3.59315L1.66391 7.83579C0.882863 8.61684 0.882863 9.88317 1.66391 10.6642L5.19945 14.1997C5.98049 14.9808 7.24682 14.9808 8.02787 14.1997L12.2705 9.95711C13.0516 9.17606 13.0516 7.90973 12.2705 7.12868L8.73498 3.59315C8.39001 3.24818 7.95038 3.05557 7.4997 3.01533V1.75C7.4997 1.33579 7.16391 1 6.7497 1ZM5.9997 5.62132V6.25C5.9997 6.66421 6.33548 7 6.7497 7C7.16391 7 7.4997 6.66421 7.4997 6.25V4.54034C7.56335 4.56468 7.62302 4.60251 7.67432 4.65381L11.2099 8.18934C11.2966 8.27605 11.3448 8.38669 11.3545 8.5H3.12102L5.9997 5.62132ZM6.26011 13.1391L3.13176 10.0107H10.0956L6.96721 13.1391C6.77195 13.3343 6.45537 13.3343 6.26011 13.1391ZM2 17.5V12.4117L3.5 13.9117V17.5C3.5 18.0523 3.94772 18.5 4.5 18.5H19.5C20.0523 18.5 20.5 18.0523 20.5 17.5V6.5C20.5 5.94772 20.0523 5.5 19.5 5.5H12.0589L10.5589 4H19.5C20.8807 4 22 5.11929 22 6.5V17.5C22 18.8807 20.8807 20 19.5 20H4.5C3.11929 20 2 18.8807 2 17.5Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/color_background_24_regular.svg";Details
| Name | Color Background |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_color_background_24_regular.svg |
| Filled file | ic_fluent_color_background_24_filled.svg |
| React components | ColorBackground24Regular, ColorBackground24Filled |
| License | MIT (© Microsoft Corporation) |