SharePoint 2016 Logo

Icons make a better view to any application. And for a developer it’s always a problem to find how to use Icons and especially where to find them. If you work with SharePoint Online solutions, this will help you (and also me) to find a place of icons and how to use them. As far as I often work with FluentUI, the post is about it.

The web page with the list of icons and search function is here:

Search FluentUI Icons

To use icons in SPFX applications you should:

1. Import css from @fluentui/react

import { IStackTokens, PrimaryButton, Stack, Toggle, css } from '@fluentui/react';

2. Add the specific className to a component

<FontIcon className={css('ms-Icon', 'ms-Icon--RemoveEvent')} /> 

Or you can use simple <i>:

<i className={css('ms-Icon', 'ms-Icon--AddEvent')} /> 

For SPFx after 1.8.2 you can use this way:

<Icon aria-label="Delete" iconName="Delete" />

Instead of 'RemoveEvent', 'AddEvent' you should enter the 'Friendly Name' of the icon you like.