Motorcycons – An Icon Font for the Powersports Industry

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.

Screen Shot 2015-09-08 at 4.23.22 PM

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.

Screen Shot 2015-09-08 at 4.49.25 PM

Screen-Shot-2015-09-08-at-4.24.12-PM

Next, I selected “Save a Copy…” from the “File” menu, chose “SVG” as the “Format” and checked the “Use Artboards” checkbox.

Screen Shot 2015-09-08 at 5.11.34 PM

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.

Screen Shot 2015-09-08 at 4.28.23 PM

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.

Screen Shot 2015-09-08 at 5.27.56 PM

You can view all of the icons in the set on the Motorcycons GitHub page. If you use it lemme know in the comments below and if you have any icon requests feel free to open an issue in the repo.

Leave a Reply

Your email address will not be published. Required fields are marked *