The Feature
The Dia&Co site uses many icons: everything in our UI from our community features, checkout flow, and inventory closet relies on them to communicate information clearly to our customers. At the time we relied on 3rd party icon font sets that we would embed. My co-worker & talented engineer Matt Ciampa and I began thinking that if we could make our own embeddable font from scratch, we would have the ability to add and subtract icons from the font file and the site easily, add highlight states, thus deepening our styleguide and consistency. It would also mean we could create original icons, such as a dress or a box, things not common in unicode sets.
Design
The first thing was to take inventory of all the icons currently appearing in our product, which ended up totalling about 75, and then match their visual design to our main mobile navigation icons. I then added some more original designs and highlight states. The number will certainly grow as we develop more icons to fill our product needs. After doing some screen tests, I settled on a 6pt weight for the thickness of my raw designs.
I designed each icon on an icon grid, working with the pen tool in Illustrator. I would then scale the final designs to 1000px, which I would then import into Type Tool 3.
Font Creation & implementation
TypeTool 3 required some set-up, which was complicated, but easy in that it was repetitive tasks. Each vector graphic had to be aligned properly in the type field, named and assigned to unicode. It took about 2 days to get each glyph into its place. The font export process was simple enough, and handled seamlessly by TypeTool. I could then take the file and test its feasibility by installing it and testing it in design software.
We scheduled some agile story points to make the switch, and worked together to QA the moment we turned them on to make sure we hadn’t missed any. Matt made me a cheat sheet on the web so I could copy and paste the proper icon directly into my sketch files. With minimal time and effort (on the engineering side) we had our own proprietary, scalable, systemized font icon set.
Advantages
If product teams can find the time and resources to create and upgrade their own icon sets, I would recommend it. The costs are minimum and can help the product’s design component easily navigate fast evolving software.
Easy Updates. You can add a newly design icon and import it to the raw font file in about five minutes. Re-export the font file and hand off to engineering. No SVGs, file naming, and asset tracking to deal with.
Sharing. Share the cheat sheet, and tiny font file with your engineer contractors and they might thank you.
Highlight states. Instead of engineering deploying skills to add “on” states to icons, or swapping SVGs, the highlight states for icons simply live in the font file as separate glyphs with unicode.
Consistency. No more asset inconsistencies like dimensions, file size, color, or style to deal with.
DIY. Make your own icons that reflect the personality and needs of your product. Your engineers no longer have to be treat them as a different kind of asset from your 3rd party font set.
