Font Decrease icon

Use the Font Decrease 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 { FontDecrease24Regular, FontDecrease24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FontDecrease24Regular aria-label="Font Decrease" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_font_decrease_24_regular.svg" width="24" height="24" alt="Font Decrease">

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="M16.2546 2.19505C15.9481 1.91642 15.4738 1.93901 15.1951 2.2455C14.9165 2.55199 14.9391 3.02632 15.2456 3.30495L17.9956 5.80492C18.2816 6.06497 18.7185 6.06497 19.0045 5.80492L21.7545 3.30495C22.061 3.02632 22.0836 2.55199 21.805 2.2455C21.5263 1.93901 21.052 1.91642 20.7455 2.19505L18.5 4.23638L16.2546 2.19505ZM12.0001 3.99998C12.3076 3.99998 12.5839 4.18767 12.6973 4.47351L18.4472 18.9733C18.5999 19.3584 18.4115 19.7943 18.0265 19.947C17.6414 20.0997 17.2055 19.9113 17.0528 19.5263L15.2579 14.9999H8.74231L6.94736 19.5263C6.79467 19.9113 6.35876 20.0997 5.97372 19.947C5.58869 19.7943 5.40033 19.3584 5.55302 18.9733L11.3029 4.47351C11.4163 4.18767 11.6926 3.99998 12.0001 3.99998ZM12.0001 6.78454L9.33713 13.4999H14.6631L12.0001 6.78454Z" 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/font_decrease_24_regular.svg";

Details

Keywords

typetexttypographyeditcreate