Icons

Icons in this system use SVG icons from Font Awesome.

SVG icons are recommended over icon fonts for a variety of reasons:

• .svg is a vector image format with optional support for CSS, JavaScript, reusability and accessibility
• SVGs are are resizable up and down without losing quality, extra sharp on retina displays, and have a small file size
• Font failures are relatively common. Browser support for SVGs is higher than for icon fonts.
• Various blocking systems or customized font settings often breaks icon fonts. These blockers will not affect SVG icons

Refer to CCS Tricks' article to learn more about font icons versus SVG icons.

Icons are used for certain buttons and are usually associated with some sort of action. They also add visual diversity to your page. When using icons, it is best to stick with well-known conventions, such as a garbage can to represent Delete, or a gear to represent Settings.

Choosing Your Icons

To reduce performance impacts of your application, it is recommended that your application only load the icons that are required, rather than the full set. When choosing an icon to use in your application, be sure to consistently use that same icon when representing a similar action or requirement.

Loading/Spinner

The loading icon is displayed using the spinner icon from Font Awesome. Font Awesome provides multiple icons that may work well as a spinner, depending on your content. You can refer to Font Awesome's documentation to animate the spinner to demonstrate a loading page.

You can also use these same principles to animate any other icon you choose.