App Title icon

Use the App Title 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 { AppTitle24Regular, AppTitle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AppTitle24Regular aria-label="App Title" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_app_title_24_regular.svg" width="24" height="24" alt="App Title">

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="M4.75 20.5H19.25C19.6642 20.5 20 20.8358 20 21.25C20 21.6297 19.7178 21.9435 19.3518 21.9932L19.25 22H4.75C4.33579 22 4 21.6642 4 21.25C4 20.8703 4.28215 20.5565 4.64823 20.5068L4.75 20.5H19.25H4.75ZM16.25 3C18.3211 3 20 4.67893 20 6.75V15.25C20 17.3211 18.3211 19 16.25 19H7.75C5.67893 19 4 17.3211 4 15.25V6.75C4 4.67893 5.67893 3 7.75 3H16.25ZM16.25 4.5H7.75C6.50736 4.5 5.5 5.50736 5.5 6.75V15.25C5.5 16.4926 6.50736 17.5 7.75 17.5H16.25C17.4926 17.5 18.5 16.4926 18.5 15.25V6.75C18.5 5.50736 17.4926 4.5 16.25 4.5Z" 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/app_title_24_regular.svg";

Details

Keywords

collectionui