Math Symbols icon

Use the Math Symbols 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 { MathSymbols24Regular, MathSymbols24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MathSymbols24Regular aria-label="Math Symbols" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_math_symbols_24_regular.svg" width="24" height="24" alt="Math Symbols">

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="M6.25 2C6.66421 2 7 2.33579 7 2.75V5.5H9.75C10.1642 5.5 10.5 5.83579 10.5 6.25C10.5 6.66421 10.1642 7 9.75 7H7V9.75C7 10.1642 6.66421 10.5 6.25 10.5C5.83579 10.5 5.5 10.1642 5.5 9.75V7H2.75C2.33579 7 2 6.66421 2 6.25C2 5.83579 2.33579 5.5 2.75 5.5H5.5V2.75C5.5 2.33579 5.83579 2 6.25 2ZM14.25 5.5C13.8358 5.5 13.5 5.83579 13.5 6.25C13.5 6.66421 13.8358 7 14.25 7H21.25C21.6642 7 22 6.66421 22 6.25C22 5.83579 21.6642 5.5 21.25 5.5H14.25ZM13.5 17.75C13.5 17.3358 13.8358 17 14.25 17H21.25C21.6642 17 22 17.3358 22 17.75C22 18.1642 21.6642 18.5 21.25 18.5H14.25C13.8358 18.5 13.5 18.1642 13.5 17.75ZM17.75 16C18.3023 16 18.75 15.5523 18.75 15C18.75 14.4477 18.3023 14 17.75 14C17.1977 14 16.75 14.4477 16.75 15C16.75 15.5523 17.1977 16 17.75 16ZM18.75 21C18.75 21.5523 18.3023 22 17.75 22C17.1977 22 16.75 21.5523 16.75 21C16.75 20.4477 17.1977 20 17.75 20C18.3023 20 18.75 20.4477 18.75 21ZM2.21967 14.2803C1.92678 13.9874 1.92678 13.5126 2.21967 13.2197C2.51256 12.9268 2.98744 12.9268 3.28033 13.2197L6.25 16.1893L9.21967 13.2197C9.51256 12.9268 9.98744 12.9268 10.2803 13.2197C10.5732 13.5126 10.5732 13.9874 10.2803 14.2803L7.31066 17.25L10.2803 20.2197C10.5732 20.5126 10.5732 20.9874 10.2803 21.2803C9.98744 21.5732 9.51256 21.5732 9.21967 21.2803L6.25 18.3107L3.28033 21.2803C2.98744 21.5732 2.51256 21.5732 2.21967 21.2803C1.92678 20.9874 1.92678 20.5126 2.21967 20.2197L5.18934 17.25L2.21967 14.2803Z" 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/math_symbols_24_regular.svg";

Details

Keywords

mathematicsformulaequation