Color Background Accent icon

Use the Color Background Accent 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 { ColorBackgroundAccent24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ColorBackgroundAccent24Regular aria-label="Color Background Accent" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_color_background_accent_24_regular.svg" width="24" height="24" alt="Color Background Accent">

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="M3 17.5V13.4117L4.48798 14.8997C5.65955 16.0713 7.55905 16.0713 8.73062 14.8997L10.1007 13.5296C10.039 13.7951 10 14.0791 10 14.375C10 16.2315 11.3942 18 13.5 18C15.6058 18 17 16.2315 17 14.375C17 13.6821 16.7863 13.0543 16.567 12.5766C16.3409 12.084 16.0554 11.6368 15.7966 11.2763C15.5344 10.9112 15.2761 10.6025 15.0844 10.3857L15.0764 10.3766L14.7505 10.0257L14.7374 10.0126C14.4441 9.71924 14.0726 9.55182 13.6899 9.51028C14.0495 8.46081 13.8106 7.25171 12.9733 6.4144L11.5589 5H19.5C20.3284 5 21 5.67157 21 6.5V17.5C21 18.3284 20.3284 19 19.5 19H4.5C3.67157 19 3 18.3284 3 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_accent_24_regular.svg";

Details

Keywords

coloreditpaintpalette