UI Toolkit

Icons

Stylistic Guidelines

Scaling Requires MAX Custom Bootstrap Stylesheet

These benchmark sizes can be used.

Default
Large
2x
3x
<span class="fa fa-university"></span>
<span class="fa-stack">
  <span class="fa fa-circle fa-stack-2x"></span>
  <span class="fa fa-university fa-stack-1x fa-inverse"></span>
</span>

<span class="fa fa-university fa-lg"></span>
<span class="fa-stack fa-lg">
  <span class="fa fa-circle fa-stack-2x"></span>
  <span class="fa fa-university fa-stack-1x fa-inverse"></span>
</span>

<span class="fa fa-university fa-2x"></span>
<span class="fa-stack fa-2x">
  <span class="fa fa-circle fa-stack-2x"></span>
  <span class="fa fa-university fa-stack-1x fa-inverse"></span>
</span>

<span class="fa fa-university fa-3x"></span>
<span class="fa-stack fa-3x">
  <span class="fa fa-circle fa-stack-2x"></span>
  <span class="fa fa-university fa-stack-1x fa-inverse"></span>
</span>

Color

Icons should always be one color. If used over a color field, negative space should be knocked out.

Although color usage is flexible, icons should always be used in high contrast tones relative to the background to maximize legibility.

One Color
Negative Space Knocked Out

Spacing

Padding varies around icons of various primary shapes. circle, vertically and horizontally rectangular, diagonal, and most complex minicons can fit within the relative padding bounding box. Circular and some complex icons should be slightly larger to offset the visual weight of surrounding negative space.

FontAwesome Icons Requires MAX Custom Bootstrap Stylesheet

Our standard icon library is the FontAwesome collection, which is implemented as an icon font.

Icons can be very easily included in a new project with a few lines of code. A slightly modified version of the standard FontAwesome markup is used (replacing the <i> with a <span> tag for accessibility purposes).

Licensing

Font Awesome is fully open source and requires no attribution when used.

Additional Icons

When a suitable FontAwesome icon is unavailable, additional icons can be found at The Noun Project.

Icons from The Noun Project can be downloaded as scalable SVG images (preferable), and can be used in that format or converted to an icon font. They can also be downloaded as PNG images.

Licensing

The Noun Project provides icons under the following two licenses:

  1. Public Domain (PD) — these icons require no attribution when used.
  2. Creative Commons Attribution (CC BY) — these icons do require attribution when used. You can use the icon for free as long as you attribute, or pay a $1.99 fee to not have to attribute. If you use the original, unmodified SVG or PNG images downloaded from The Noun Project, attribution is already embedded in each icon and no further attribution is necessary.