Brain icon

Use the Brain 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 { Brain24Regular, Brain24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Brain24Regular aria-label="Brain" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_brain_24_regular.svg" width="24" height="24" alt="Brain">

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="M14.5 2C16.1405 2 17.4964 3.21548 17.7178 4.79492C19.5765 5.08024 21 6.68645 21 8.625C21 9.72785 20.5383 10.7221 19.7988 11.4277C21.1042 12.0863 22 13.4381 22 15V15.25C22 17.2437 20.5412 18.8958 18.6328 19.1992C18.2015 20.8129 16.7319 21.9998 15.0059 22C13.7782 22 12.686 21.4091 12 20.4961C11.314 21.4091 10.2218 22 8.99414 22C7.26809 21.9998 5.79853 20.8129 5.36719 19.1992C3.45883 18.8958 2 17.2437 2 15.25V15C2 13.4384 2.89526 12.0865 4.2002 11.4277C3.46102 10.7221 3 9.7276 3 8.625C3 6.68645 4.42349 5.08024 6.28223 4.79492C6.50358 3.21548 7.85955 2 9.5 2C10.5054 2 11.4038 2.45677 12 3.17383C12.5962 2.45677 13.4946 2 14.5 2ZM9.5 3.5C8.5335 3.5 7.75 4.2835 7.75 5.25V5.5C7.75 5.91421 7.41421 6.25 7 6.25H6.875C5.56332 6.25 4.5 7.31332 4.5 8.625C4.5 9.93668 5.56332 11 6.875 11H7.25C7.66421 11 8 11.3358 8 11.75C8 12.1642 7.66421 12.5 7.25 12.5H6.875C6.84659 12.5 6.8183 12.4977 6.79004 12.4971C6.77675 12.4978 6.76346 12.5 6.75 12.5H6C4.61929 12.5 3.5 13.6193 3.5 15V15.25C3.5 16.6307 4.61929 17.75 6 17.75C6.33862 17.7509 6.62814 17.9771 6.71875 18.292L6.74512 18.4316H6.74707C6.85289 19.5956 7.83586 20.4998 8.99414 20.5C10.2385 20.5 11.25 19.4909 11.25 18.25V5.24121C11.2453 4.27876 10.4636 3.5 9.5 3.5ZM14.5 3.5C13.5364 3.5 12.7547 4.27876 12.75 5.24121V18.25C12.75 19.4909 13.7615 20.5 15.0059 20.5C16.1641 20.4998 17.1471 19.5956 17.2529 18.4316H17.2549L17.2812 18.292C17.3719 17.9771 17.6614 17.7509 18 17.75C19.3807 17.75 20.5 16.6307 20.5 15.25V15C20.5 13.6193 19.3807 12.5 18 12.5H17.25C17.2362 12.5 17.2226 12.4978 17.209 12.4971C17.181 12.4977 17.1531 12.5 17.125 12.5H16.75C16.3358 12.5 16 12.1642 16 11.75C16 11.3358 16.3358 11 16.75 11H17.125C18.4367 11 19.5 9.93668 19.5 8.625C19.5 7.31332 18.4367 6.25 17.125 6.25H17C16.5858 6.25 16.25 5.91421 16.25 5.5V5.25C16.25 4.2835 15.4665 3.5 14.5 3.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/brain_24_regular.svg";

Details