Text Percent icon

Use the Text Percent 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 { TextPercent24Regular, TextPercent24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextPercent24Regular aria-label="Text Percent" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_percent_24_regular.svg" width="24" height="24" alt="Text Percent">

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="M17.9838 3.12824C18.3272 3.35986 18.4179 3.82601 18.1862 4.16941L7.05735 20.6687C6.82572 21.0121 6.35957 21.1027 6.01618 20.871C5.67278 20.6394 5.58217 20.1733 5.81379 19.8299L16.9427 3.33062C17.1743 2.98722 17.6404 2.89661 17.9838 3.12824ZM6.5 4.50002C5.11929 4.50002 4 5.6193 4 7.00002C4 8.38073 5.11929 9.50002 6.5 9.50002C7.88071 9.50002 9 8.38073 9 7.00002C9 5.6193 7.88071 4.50002 6.5 4.50002ZM2.5 7.00002C2.5 4.79088 4.29086 3.00002 6.5 3.00002C8.70914 3.00002 10.5 4.79088 10.5 7.00002C10.5 9.20915 8.70914 11 6.5 11C4.29086 11 2.5 9.20915 2.5 7.00002ZM15 17C15 15.6193 16.1193 14.5 17.5 14.5C18.8807 14.5 20 15.6193 20 17C20 18.3807 18.8807 19.5 17.5 19.5C16.1193 19.5 15 18.3807 15 17ZM17.5 13C15.2909 13 13.5 14.7909 13.5 17C13.5 19.2092 15.2909 21 17.5 21C19.7091 21 21.5 19.2092 21.5 17C21.5 14.7909 19.7091 13 17.5 13Z" 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/text_percent_24_regular.svg";

Details