• All icons are prefixed with `flexicon-`.
• Grid sizes are factors of eight (8) with most being a grid size of twenty-four (24)
• Icons with a suffix of `-large` are for use in the mobile navbars.

.flexicon         { font-size: $theme-icon-font-grid-size; }
.flexicon--small  { font-size: $theme-icon-font-grid-size-small; }
.flexicon-0       { transform: rotate(0deg); }
.flexicon-90      { transform: rotate(90deg); }
.flexicon-180     { transform: rotate(180deg); }
.flexicon-270     { transform: rotate(270deg); }
.flexicon-toggler { color:     $theme-color-gray-dark; }

Note: The icon rotation classes will only work on elements where the `display` property is not set to `inline`.

Inline SVG images have been considered and discussed several times. There are some things that make them infeasible for use as part of the UI Library.

If the UI Library were to provide icons as inline SVG images; the application developer would need to copy/paste the SVG code from a static resource hosted on the library site, or the SVG images would have to be served up en mass from a single resource file containing all the images.

If we wanted helper functions in the applications to easily insert the SVGs, there isn't really a way to single source the SVG files. Copies of the SVG files would need to reside in each project and specific helper functions developed for the various projects.

Here is a good discussion of Github's decision to got with SVGs and how they implemented them.