Sign up for free to use this document yourself.
  • #Make Your Own Icon Fonts

  • Off the Shelf

  • Intro

  • Rolling Your Own Icon Font

  • Outro

  • As Gabrielle covered a few weeks ago, there are plenty of high-quality paid and free icon fonts out there. If you can locate a set that contains all the icons you needs, AND integrates with your design, go for it.

    Fontawesome has been a revelation for front-end devs but, shipping with 379 icons, the reality is most end-users only ever get to see between 1% of the icons they download.

    Linking your font from a public CDN means there’s a good chance your user may have already cached the font before they get to your site.

    However, if you need an icon not represented in your current font, you’re out of luck.

  • Recently I’ve been reading a book on the famous Lascaux cave paintings, that were rediscovered in the 1940s in France.

    Apart from the obvious beauty of these paintings, I was most struck by how modern they look. As you might expect, they aren’t perfect photographic reproductions — they were drawn with crude sticks and fingers — yet with a few simple lines we know EXACTLY what we’re looking at.

    To me, this tells us about the way our brains work.

    These paintings were made long before the birth of written language — let alone the books, posters, billboards and signage that we see everywhere almost from the day we’re born.

    Cave painting of a bull from Lascaux juxtaposed against a modern cattle crossing sign.
    Cave painting of a bull from Lascaux juxtaposed
    against a modern cattle crossing sign.

    I think this gives us a clue that our default ‘brain OS’ has understood and used symbols like these, long before our world become saturated with them – that our symbol-heavy world is something a reflection of how our brains work on the inside.

    In 2014 we’re swimming in an icon world, though until recently, for technical reasons they’ve mostly been pixel-based graphics.

  • Options 1: Glyphs, Fontforge, and Inkscape

  • Until recently, making your own icon font took some commitment. High-end packages such as Glyphs are a little overwhelming and relatively expensive ($US340) for the part-time fontographer.

    More cost effective Open Source options like FontForge and Inkscape are relatively powerful, but certainly not polished experiences.

{"cards":[{"_id":"4044e28adb16f20e94000018","treeId":"4044e273db16f20e94000016","seq":1,"position":1,"parentId":null,"content":"#Make Your Own Icon Fonts\n"},{"_id":"4044e759db16f20e9400001c","treeId":"4044e273db16f20e94000016","seq":1,"position":3,"parentId":"4044e28adb16f20e94000018","content":""},{"_id":"4044fb9edb16f20e9400001f","treeId":"4044e273db16f20e94000016","seq":693464,"position":1.125,"parentId":null,"content":"##Off the Shelf##\n"},{"_id":"4044fc3adb16f20e94000020","treeId":"4044e273db16f20e94000016","seq":1,"position":1,"parentId":"4044fb9edb16f20e9400001f","content":"As Gabrielle covered a few weeks ago, there are plenty of high-quality paid and free icon fonts out there. If you can locate a set that contains all the icons you needs, AND integrates with your design, go for it.\n\nFontawesome has been a revelation for front-end devs but, shipping with 379 icons, the reality is most end-users only ever get to see between 1% of the icons they download.\n\nLinking your font from a public CDN means there’s a good chance your user may have already cached the font before they get to your site.\n\nHowever, if you need an icon not represented in your current font, you’re out of luck."},{"_id":"494a5cb3de2cb9f04c0000f2","treeId":"4044e273db16f20e94000016","seq":693462,"position":1.25,"parentId":null,"content":""},{"_id":"4044e3b4db16f20e94000019","treeId":"4044e273db16f20e94000016","seq":1,"position":1.5,"parentId":null,"content":"##Intro##\n"},{"_id":"4044e7a9db16f20e9400001d","treeId":"4044e273db16f20e94000016","seq":1,"position":1,"parentId":"4044e3b4db16f20e94000019","content":"Recently I've been reading a book on the famous Lascaux cave paintings, that were rediscovered in the 1940s in France.\n\nApart from the obvious beauty of these paintings, I was most struck by how modern they look. As you might expect, they aren’t perfect photographic reproductions — they were drawn with crude sticks and fingers — yet with a few simple lines we know EXACTLY what we’re looking at.\n\nTo me, this tells us about the way our brains work.\n\nThese paintings were made long before the birth of written language — let alone the books, posters, billboards and signage that we see everywhere almost from the day we’re born.\n\nCave painting of a bull from Lascaux juxtaposed against a modern cattle crossing sign.\nCave painting of a bull from Lascaux juxtaposed\nagainst a modern cattle crossing sign.\n\nI think this gives us a clue that our default ‘brain OS’ has understood and used symbols like these, long before our world become saturated with them – that our symbol-heavy world is something a reflection of how our brains work on the inside.\n\nIn 2014 we’re swimming in an icon world, though until recently, for technical reasons they’ve mostly been pixel-based graphics."},{"_id":"4045052bdb16f20e94000021","treeId":"4044e273db16f20e94000016","seq":1,"position":2,"parentId":null,"content":"##Rolling Your Own Icon Font##\n"},{"_id":"40450588db16f20e94000022","treeId":"4044e273db16f20e94000016","seq":1,"position":1,"parentId":"4045052bdb16f20e94000021","content":"##Options 1: Glyphs, Fontforge, and Inkscape##\n\n"},{"_id":"40450924db16f20e94000023","treeId":"4044e273db16f20e94000016","seq":1,"position":1,"parentId":"40450588db16f20e94000022","content":"Until recently, making your own icon font took some commitment. High-end packages such as Glyphs are a little overwhelming and relatively expensive ($US340) for the part-time fontographer.\n\nMore cost effective Open Source options like FontForge and Inkscape are relatively powerful, but certainly not polished experiences."},{"_id":"4044e6d8db16f20e9400001b","treeId":"4044e273db16f20e94000016","seq":1,"position":3,"parentId":null,"content":"##Outro##\n"}],"tree":{"_id":"4044e273db16f20e94000016","name":"Make your own Icon Font","publicUrl":"make-your-own-icon-font"}}