Within MobileIron UX, we struggle to manage the ever-growing demand for icons for multiple projects within MobileIron, while keeping a consistent theme among icons. The current process relies on multiple PNGs, which are challenging to maintain and keep up to date and have file-size implications, and uses image sprites, which (although fast) have issues related to scaling and maintenance.
- Icons need to be available in multiple sizes and multiple colors.
- Icons need to be of sufficiently high quality to support retina displays.
- Icons need to be accessible and screen-reader compatible.
The current icon solution uses the legacy method of image sprites (see below), which is hard to manage, inaccessible, and available only with a fixed width.
The first option we came up with was something we have been trying successfully for some time: using Scalable Vector Graphics (SVGs). SVG files are small in size and are vector files, which do not lose quality with changes in image size. Vector graphics can also be colored. This led to the design of 272 Icons as SVG files (see below). Icons and images used in MobileIron Core and Cloud were taken as starting points.
While the SVG icons were quality icon sets, customizing the icons was still an issue, along with maintainability and usability of the icons in the products.
Grunticon is a flexible SVG workflow that manages all your SVGs in a single location and creates a style sheet for developers to use the SVGs as a CSS class.
To use Grunticon, you simply put all of your SVG icons in a single folder and run Grunticon to create the proper class(es).
For existing products that are already using many icons, transitioning to SVG icons is pretty easy. Although for advanced CSS 3 transitions--for example, changing icons on hover--FontIcons is the best solution. So when starting new projects within MobileIron, we will push for using Font Icons.
design of font icons
Font Icons gives you scalable vector icons that can instantly be customized—size, color, drop shadow, and anything else that can be done via CSS.
Using Font Icons has the following benefits:
- One font of 272 icons only ~250 KB in size.
- Easily style icon color, size, shadow, and anything that’s possible with CSS.
- Perfect on retina displays -- Font Icons are vectors, which means they’re gorgeous on high-resolution displays.
- They are accessible (screen-reader compatible).
Solution: Font CUSTOM
Font Custom is a command line tool that generates cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection of SVGs.
SEE HOW THE ICONS COME TO LIFE
MobileIron Font Icons gives you scalable vector icons that can instantly be customized—size, color, drop shadow, and anything else that can be done with the power of CSS.