Font Increase icon

Use the Font Increase 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 { FontIncrease24Regular, FontIncrease24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M15.1951 5.75446C15.4738 6.06095 15.9481 6.08354 16.2546 5.80491L18.5 3.76358L20.7455 5.80491C21.052 6.08354 21.5263 6.06095 21.805 5.75446C22.0836 5.44797 22.061 4.97364 21.7545 4.69502L19.0045 2.19504C18.7185 1.93499 18.2816 1.93499 17.9956 2.19504L15.2456 4.69502C14.9391 4.97364 14.9165 5.44797 15.1951 5.75446ZM12.0001 3.99998C12.3076 3.99998 12.5839 4.18767 12.6973 4.4735L18.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.4735C11.4163 4.18767 11.6926 3.99998 12.0001 3.99998ZM9.33713 13.4999H14.6631L12.0001 6.78453L9.33713 13.4999Z" 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_increase_24_regular.svg";

Details

Keywords

typetexttypographyeditcreate