Math Formula icon
Means function of x (variable). Used in general math formulas and module scripting scenarios. The Math Formula icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Math Formula 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 { MathFormula24Regular, MathFormula24Filled } from "@fluentui/react-icons";
export function Example() {
return <MathFormula24Regular aria-label="Math Formula" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_math_formula_24_regular.svg" width="24" height="24" alt="Math Formula"> 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.4817 3.82693C11.3693 3.00298 9.78596 3.73555 9.69388 5.11675L9.53501 7.49977H12.25C12.6642 7.49977 13 7.83555 13 8.24977C13 8.66398 12.6642 8.99977 12.25 8.99977H9.43501L8.83462 18.0056C8.6556 20.6909 5.47707 22.0075 3.45168 20.2353L3.25613 20.0642C2.9444 19.7914 2.91282 19.3176 3.18558 19.0059C3.45834 18.6942 3.93216 18.6626 4.24389 18.9353L4.43943 19.1064C5.53003 20.0607 7.24154 19.3518 7.33794 17.9058L7.93168 8.99977H5.75001C5.3358 8.99977 5.00001 8.66398 5.00001 8.24977C5.00001 7.83555 5.3358 7.49977 5.75001 7.49977H8.03168L8.1972 5.01697C8.3682 2.4519 11.3087 1.0914 13.3745 2.62159L13.7464 2.8971C14.0793 3.14365 14.1492 3.61334 13.9027 3.94619C13.6561 4.27903 13.1864 4.34899 12.8536 4.10244L12.4817 3.82693ZM13.7121 12.7631C13.4879 12.337 12.9259 12.2296 12.5604 12.543L12.2381 12.8192C11.9236 13.0888 11.4501 13.0523 11.1806 12.7379C10.911 12.4234 10.9474 11.9499 11.2619 11.6803L11.5842 11.4041C12.6809 10.464 14.3668 10.7862 15.0395 12.0645L16.0171 13.922L18.7197 11.2194C19.0126 10.9265 19.4874 10.9265 19.7803 11.2194C20.0732 11.5123 20.0732 11.9872 19.7803 12.2801L16.7486 15.3118L18.2879 18.2364C18.5121 18.6625 19.0741 18.7699 19.4397 18.4565L19.7619 18.1803C20.0764 17.9107 20.5499 17.9472 20.8195 18.2617C21.089 18.5762 21.0526 19.0496 20.7381 19.3192L20.4159 19.5954C19.3191 20.5355 17.6333 20.2133 16.9605 18.935L15.6381 16.4224L12.2803 19.7801C11.9875 20.073 11.5126 20.073 11.2197 19.7801C10.9268 19.4872 10.9268 19.0123 11.2197 18.7194L14.9066 15.0325L13.7121 12.7631Z" 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_formula_24_regular.svg";Details
| Name | Math Formula |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_math_formula_24_regular.svg |
| Filled file | ic_fluent_math_formula_24_filled.svg |
| React components | MathFormula24Regular, MathFormula24Filled |
| License | MIT (© Microsoft Corporation) |