DEV Community

Christoffer Lybekk
Christoffer Lybekk

Posted on

How To: Use Fluent UI Icons in Gatsby


  • A running Gatsby development environment with Fluent UI

First - Initialize icons

Fluent UI React's official documentation instructs you to include the below lines in the root entry file.

import { initializeIcons } from '@uifabric/icons';
Enter fullscreen mode Exit fullscreen mode

In Gatsby, an easier and more straightforward way is to include these lines in index.js or a layout component (I.E. Layout.js).

Another possible solution may be to put them in one of Gatsby's API files.

By default, when a user visits the deployed Gatsby app, all icons will be downloaded from one of Microsoft servers.

To avoid this behaviour, do a couple of small adjustments.

  1. Copy the icons from your_project\node_modules\@uifabric\icons\fonts to a subdirectory in your projects 'static' folder.
  2. Modify the lines from earlier slightly, as below, where the parameter for initializeIcons() is the path to where the icons are.
import { initializeIcons } from '@uifabric/icons';
Enter fullscreen mode Exit fullscreen mode

The slash '/' at the end is important

Now Gatsby will load the icons with the same performance and guarantees as the other files, ensuring correct rendering.

See an example of Fluent UI running on Gatsby here:
Lybekk Tech - UUID Generator

Further documentation on using
icons with Microsoft's Fluent UI

As an added bonus, a way to use Font Awesome instead of Fluent UI icons.

import { registerIcons } from '@uifabric/styling';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode } from '@fortawesome/free-solid-svg-icons';

  icons: {
    Filter: <FontAwesomeIcon icon={faCode} />
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

mildronize profile image
Thada Wangthammang

Thanks a lot, it solves the problem. I think it may have better solution, but at this point I satisfy.