Pi icon

Use the Pi 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 { Pi24Regular, Pi24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.5 6.75C2.5 5.23122 3.73122 4 5.25 4H20.25C20.6642 4 21 4.33579 21 4.75C21 5.16421 20.6642 5.5 20.25 5.5H17V16.9525C17 18.1627 18.1989 19.0076 19.3386 18.6005L19.4977 18.5437C19.8878 18.4044 20.317 18.6077 20.4563 18.9977C20.5956 19.3878 20.3923 19.817 20.0023 19.9563L19.8431 20.0131C17.7266 20.7691 15.5 19.2 15.5 16.9525V5.5H9.49403C9.48959 5.73961 9.48182 6.05906 9.46824 6.44438C9.43664 7.34121 9.37346 8.59681 9.24708 10.0344C8.9955 12.8961 8.48925 16.5325 7.45833 19.4964C7.32226 19.8876 6.89479 20.0944 6.50357 19.9584C6.11235 19.8223 5.90551 19.3948 6.04159 19.0036C7.01067 16.2175 7.50442 12.7289 7.75284 9.90307C7.87646 8.49694 7.93828 7.26816 7.96918 6.39155C7.98192 6.03005 7.98938 5.72876 7.99376 5.5H5.25C4.55964 5.5 4 6.05964 4 6.75V7.25C4 7.66421 3.66421 8 3.25 8C2.83579 8 2.5 7.66421 2.5 7.25V6.75Z" 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/pi_24_regular.svg";

Details

Keywords

mathematics3.14159265359formula