Brain Circuit icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 11H7C8.16483 11 9.12286 11.8852 9.23828 13.0195L9.25 13.25V13.6465C9.98275 13.9433 10.5 14.6608 10.5 15.5C10.5 16.6046 9.60457 17.5 8.5 17.5C7.39543 17.5 6.5 16.6046 6.5 15.5C6.5 14.6608 7.01725 13.9433 7.75 13.6465V13.25L7.74609 13.1729C7.70747 12.7949 7.38817 12.5 7 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.25V9.25H10.3535C10.0567 9.98275 9.3392 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.3392 6.5 10.0567 7.01725 10.3535 7.75H11.25V5.25C11.25 4.2835 10.4665 3.5 9.5 3.5ZM17.7305 12.5C17.5087 12.883 17.1642 13.1847 16.75 13.3525V14.25C16.75 15.4926 15.7426 16.5 14.5 16.5H12.75V18.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.7305ZM8.5 15C8.22386 15 8 15.2239 8 15.5C8 15.7761 8.22386 16 8.5 16C8.77614 16 9 15.7761 9 15.5C9 15.2239 8.77614 15 8.5 15ZM14.5 3.5C13.5364 3.5 12.7547 4.27876 12.75 5.24121V15H14.5C14.9142 15 15.25 14.6642 15.25 14.25V13.3525C14.5174 13.0557 14 12.3391 14 11.5C14 10.3954 14.8954 9.5 16 9.5C16.8839 9.5 17.6321 10.074 17.8965 10.8691C18.829 10.5486 19.5 9.6663 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.5ZM16 11C15.7239 11 15.5 11.2239 15.5 11.5C15.5 11.7761 15.7239 12 16 12C16.2761 12 16.5 11.7761 16.5 11.5C16.5 11.2239 16.2761 11 16 11ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8Z" 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_circuit_24_regular.svg";

Details

Keywords

thinkai