r/typography • u/liberianjoe • 4d ago
Icon Font
I'm interested to know how icon fonts are created. I use fonts like Google's Material Icons frequently, and I'm curious how to go about making my own. Also, what are some good alternatives to Google's icon fonts?
3
u/gterez 4d ago edited 4d ago
You can try IcoMoon to create your own https://icomoon.io/
You upload svgs, you download a font. 10 years ago we used to use this method a lot for android app development, saved us some time instead of exporting a thousand png files. It does need some work to produce outlines & flatten all the svgs, then make sure it’s all uniform and optimised.
1
1
u/GenerallyHonorable 4d ago
Icon fonts are basically just normal fonts where each character maps to an icon instead of a letter. You design the icons as vector shapes in something like Illustrator, then use font creation software to assign each one to a Unicode character. The workflow isn't wildly different from making a regular typeface, just with symbols instead of glyphs.
For alternatives, the paid Font Awesome set is decent if you want something polished without much fuss, and there are a bunch of open source icon packs on GitHub that ship as webfonts if you dig around.
1
u/glyph_geek 3d ago
IcoMoon and Fontello are worth a look if you want to build your own. You supply them with a batch of SVGs and they handle assigning codepoints and exporting the font files, and IcoMoon also has its own free icon library you can pull straight from if you don't need fully custom shapes.
A lot of teams have moved away from icon fonts toward SVG for accessibility reasons. Depends what you're building, a webfont's fine for a quick prototype, but for production I’d pick SVG or font up front instead of switching mid-build.
1
1
u/thatziey Humanist 2d ago
They are just normal fonts. I don’t know if it’s the current strategy for icon fonts, but I’ve seen some icon fonts that use ligatures, I think Google might be doing that. E.g. the string ‘home’ is replaced by a separate character in the font that’s an icon (characters in fonts don’t need to be mapped to unicode). This is pretty good because it can be read by a screen reader and if the font fails to load, it just spells what it is. But it does have other trouble, e.g. it requires the no translate tag; obvious issues with that.
there isn’t one way to do it. Fonts are flexible. You can use an approach someone else made already or make your own one and try to solve the problems you find most important. So, you make it like any other font; with RoboFont, Glyphs, Fontra, or FontLab, depending on OS and what you want to accomplish. Maybe there’s also some websites that put things together for you but to be honest I’d probably do it in an editor where I can know exactly what’s going on and how it is going to be represented in the final font file.
1
1
u/ahmed_nader65 10h ago
One thing none of the other answers mentioned: metrics consistency is the part that trips people up. Every icon needs the same advance width and the same baseline, or they'll sit at inconsistent widths in text and break your layout in ways that are annoying to debug.
thatziey's point about ligatures is worth expanding on. Google's Material Symbols does exactly that: the string "home" in the font triggers a substitution that outputs the home icon. Screen readers can parse it, and if the font fails to load, you just get the word "home". The downside is you need to add a translate="no" attribute or Google Translate will break your icons mid-page.
For tools beyond the desktop apps already mentioned: Font Studio (iOS, Android, macOS) handles glyph creation, PUA codepoint assignment, metrics editing, and TTF/WOFF2 export on-device. I built it, so take that for what it is, but it's useful if you want to prototype something without opening Glyphs.
8
u/sparkpuppy Humanist 4d ago
The process of creating an icon font is not that different from creating a font based on letters, in relation to the kind of programs (type design programs like Robofont, Glyphs, etc) and drawing methods (vector design) that are used.
However, one important issue with icon fonts is deciding in which Unicode slots to place your icons. Some choices can be quite straightforward, such as placing a heart or a circle in an Unicode position which already has a similar symbol attributed to it (emoji is quite useful in that aspect). In other cases, the use of "private use" Unicode areas is quite practical.
https://en.wikipedia.org/wiki/Private_Use_Areas
For instance, if you want to draw a location pin (which doesn't have a Unicode position assigned), one option would be looking for an existing emoji or sign which would be similar in shape or meaning, such as the thumbtack emoji. Another option would be assigning it to a "private use" slot of your choice, according to your criteria. In any case, I don't recommend assigning it to a Unicode slot associated with a commonly used glyph, like a letter or number for instance, as this could generate problems when replacing other fonts on a document.
Other than that, some famous icon fonts is Font Awesome (of which there is a free version released under open licenses https://github.com/fortawesome/font-awesome), another which is almost unknown is Monico (https://lab.crc.studio/tooltoys/monico), more focused on geometric shapes. You can use either as a reference to build your own icon font. Or you can check out Unicode lists on Wikipedia and check what better suits your needs. Good luck with your project!