Custom icons enhancement

Use the custom icons enhancement to make adding the supported icons to your digital workplace easier. You can use these icons in the same way that you use Font Awesome icons within your site. For details on using FontAwesome icons, see Using Font Awesome Icons.

Icon examples.

Sections in this article:

Set up


Adding code that contains errors can disrupt the functionality of your digital workplace. Please use caution when adding code to this area.


Before you can use these icons, you must add the following to your digital workplace's header:

<link rel="stylesheet" type="text/css" href="" />

For instructions on how to navigate to your header, see Accessing the Header page

Considerations and caveats

Keep in mind the following when using this enhancement: 

  • The following Font Awesome transformations can't be used with Igloo custom icons:
    • Using icons instead of bullets in a list
    • Animations (spin, beat, etc.)
    • Flip or rotate
  • This enhancement may conflict with the theming of heavily customized sites and may need additional CSS to avoid theme conflicts.

Using this enhancement

The following icons are available as part of this enhancement:

Icon Description Icon name
Igloo icon. Igloo Software logo igicon-igloo
Slack icon. Slack logo igicon-slack
Teams icon. Microsoft Teams logo igicon-teams
App store icon. iOS App Store logo igicon-app-store-ios
Play store icon. Google Play Store logo igicon-google-play
Mastodon icon. Mastodon logo igicon-mastodon
TikTok icon. Tiktok logo igicon-tiktok
X icon. X (formerly Twitter) logo igicon-x

You can place these icons anywhere that HTML can be placed by adding an <a> or <i> element, with a class of igicon-nameOfIcon. For example, to use the Tiktok icon, you would use something like this:

<i class="igicon-tiktok">&nbsp;</i>

These icons can be used the same way as Font Awesome icons, including most of the Font Awesome transformations outlined in the Igloo Help Center article, aside from the abovementioned exceptions.

To use the Font Awesome transformations, use the same classes as you would to customize a Font Awesome icon. For example:

      <i class="igicon-teams fa-2x fa-border fa-pull-right">&nbsp;</i>
      <i class="igicon-slack fa-xs">&nbsp;</i>
      <i class="igicon-igloo fa-5x">&nbsp;</i>

The code above will result in the icons appearing like this:

Examples of using font awesome classes to make icons bigger, smaller, and have a border.