Info icon

Microsoft uses it to represent generic information in content. The Info icon is tagged details, information and content. Similar Fluent icons include Info Shield, Text Font Info and Arrow Counterclockwise Info.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_info_24_regular.svg

Info icon in React

npm install @fluentui/react-icons

import { Info24Regular } from "@fluentui/react-icons";

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

Use the Info icon in React

Import Info24Regular and Info24Filled from Microsoft's @fluentui/react-icons package; the code tabs above have this and other platforms. Coding agents can look the component up through the Fluent Icons MCP server.

Details

NameInfo
StylesRegular (outlined), Filled
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_info_24_regular.svg
Filled fileic_fluent_info_24_filled.svg
React (Regular)Info12Regular, Info16Regular, Info20Regular, Info24Regular, Info28Regular, Info32Regular, Info48Regular
React (Filled)Info12Filled, Info16Filled, Info20Filled, Info24Filled, Info28Filled, Info32Filled, Info48Filled
Font glyph (Regular, 24 px)U+F4A4 · &#xF4A4;
Font glyph (Filled, 24 px)U+F4AB · &#xF4AB;
LicenseMIT (© Microsoft Corporation)

Keywords

informationdetailscontent

Also in Material Symbols

Info iconInfoGoogle's version of this icon, on Materialicons

Similar icons