Icon Preview

Icons represent concepts, objects, or actions, and have semantic purpose within a layout. They should always be recognizable, functional, and easily understood.

This page offers guidance on how to implement icons in Fluent UI React. For guidance on proper icon usage, see the iconography page.

Icon storybook
React guidance

Properties

className

Used to style the icon

Default:

none

filled

Used to determine whether the filled or unfilled version of an icon is the default when bundleIcon is used boolean

Default:

none

primaryFill

Used to change the primary fill of the icon

Default:

currentColor

title

Specifies the title attribute for the svg

Default:

none