Jump to content




We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.



An icon can be included within the markup by using the following code:

<i class='fa fa-iconname'></i>

The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.

Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.


Icon consistency

It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.

To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.

The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-



  •   plus-circle
  •   plus


  •   times-circle
  •   trash-o


  •   pencil


  •   undo

Go Somewhere

  •   arrow-right

Open External Link

  •   external-link

Confirming Yes/No

  •   check
  •   times


  •   lock
  •   unlock

Log In/Sign In

  •   key


  •   copy


  •   cog

Flagging On/Off

  •   flag
  •   flag-o

Star On/Off

  •   star
  •   star-o


  •   cogs


  •   question-circle


  •   level-up


  •   code

Mail/Send Mail

  •   envelope-o


  •   search


  •   search


  •   refresh

Execute/Run Now

  •   play-circle

Easy Mode/Visual Editor

  •   magic


  Report Guide

  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy