Brightness Low icon

Use the Brightness Low 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 { BrightnessLow24Regular, BrightnessLow24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BrightnessLow24Regular aria-label="Brightness Low" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_brightness_low_24_regular.svg" width="24" height="24" alt="Brightness Low">

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="M12 3.5C12.4142 3.5 12.75 3.83579 12.75 4.25V5.25C12.75 5.66421 12.4142 6 12 6C11.5858 6 11.25 5.66421 11.25 5.25V4.25C11.25 3.83579 11.5858 3.5 12 3.5ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17ZM12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12C15.5 13.933 13.933 15.5 12 15.5ZM19.75 12.75C20.1642 12.75 20.5 12.4142 20.5 12C20.5 11.5858 20.1642 11.25 19.75 11.25H18.75C18.3358 11.25 18 11.5858 18 12C18 12.4142 18.3358 12.75 18.75 12.75H19.75ZM12 18C12.4142 18 12.75 18.3358 12.75 18.75V19.75C12.75 20.1642 12.4142 20.5 12 20.5C11.5858 20.5 11.25 20.1642 11.25 19.75V18.75C11.25 18.3358 11.5858 18 12 18ZM5.25 12.75C5.66421 12.75 6 12.4142 6 12C6 11.5858 5.66421 11.25 5.25 11.25H4.25C3.83579 11.25 3.5 11.5858 3.5 12C3.5 12.4142 3.83579 12.75 4.25 12.75H5.25ZM6.21967 6.21967C6.51256 5.92678 6.98744 5.92678 7.28033 6.21967L7.78033 6.71967C8.07322 7.01256 8.07322 7.48744 7.78033 7.78033C7.48744 8.07322 7.01256 8.07322 6.71967 7.78033L6.21967 7.28033C5.92678 6.98744 5.92678 6.51256 6.21967 6.21967ZM7.28033 17.7803C6.98744 18.0732 6.51256 18.0732 6.21967 17.7803C5.92678 17.4874 5.92678 17.0126 6.21967 16.7197L6.71967 16.2197C7.01256 15.9268 7.48744 15.9268 7.78033 16.2197C8.07322 16.5126 8.07322 16.9874 7.78033 17.2803L7.28033 17.7803ZM17.7803 6.21967C17.4874 5.92678 17.0126 5.92678 16.7197 6.21967L16.2197 6.71967C15.9268 7.01256 15.9268 7.48744 16.2197 7.78033C16.5126 8.07322 16.9874 8.07322 17.2803 7.78033L17.7803 7.28033C18.0732 6.98744 18.0732 6.51256 17.7803 6.21967ZM16.7197 17.7803C17.0126 18.0732 17.4874 18.0732 17.7803 17.7803C18.0732 17.4874 18.0732 17.0126 17.7803 16.7197L17.2803 16.2197C16.9874 15.9268 16.5126 15.9268 16.2197 16.2197C15.9268 16.5126 15.9268 16.9874 16.2197 17.2803L16.7197 17.7803Z" 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/brightness_low_24_regular.svg";

Details

Keywords

sunlightdark