A core concept of selling automotive, motorcycle and powersports parts online is fitment. Mapping parts to vehicles. While working in the powersports industry I found that icons provided a quick, universal way of conveying that association visually. However, it was a challenge to find quality sources for appropriate iconography. So I created Motorcycons. A free icon font set for other Moto-Feds (Motorcycle Front End Developers. #IJustMadeThatUp) to use in their projects.
I identified popular vehicle types, chose some general parts categories and created illustrations for each. Using Adobe Illustrator, I created a document with a 500px X 500px artboard. Working in a consistent square shape for all icons in the set ensured that they would be proportionate when generating the icon font. The names of the artboards would be used as the exported icon filenames and in the class names as well. So I used a BEM naming convention for the labels.
To create the icon font files I used IcoMoon.io’s App which works best with SVG files that don’t contain any borders. So I selected each icon individually, chose “Path > Outline Stroke” from the “Object” menu. Then united paths using the “Pathfinder” window in order to form one shape per icon.
Next, I selected “Save a Copy…” from the “File” menu, chose “SVG” as the “Format” and checked the “Use Artboards” checkbox.
I used the settings below in the “SVG Options” dialog box. Using “Decimal Places: 3” seems to generate a good level of detail while maintaining a small file size.
Then I headed over to the IcoMoon.io App and clicked the “Import Icons” button at the top left. One great thing about IcoMoon.io is you can always go back and import the selection.json file that it generates in order to edit the icons in the font set or add more. As a bonus I added some custom Modifier Classes that can be added for animation effects on the icons a la Font Awesome.