Sketch Missing Fonts: How to Install Ionicons on a Mac

Sketch file complaining that it is missing fonts? Need to have Ionicons installed on your system so you can see what icons are being used in Sketch? Read on my friends...

When visiting the Ionicons website, I could only find information on how to use Ionicons, but I needed to install them on my computer so I could see the fonts in my Sketch file and then use them in my CSS or wherever. This was simple (in the end), here's what I did:

  1. Install Ionicons via npm - npm i ionicons (I'm going to presume you have npm installed already)
  2. Open the Font Book app
  3. Select 'Add Fonts' - File > Add Fonts (or CMD+O)
  4. Find the folder that has the fonts on your computer
    1. In my case it was Users⁩/markconroy⁩/⁨node_modules⁩/⁨ionicons⁩/⁨dist⁩/fonts
  5. Click 'Open' to install the fonts
  6. Restart Sketch

Took me about 30 minutes to figure that out. Hopefully it will save you 30 minutes.

Filed Under:

  1. Ionic Framework
  2. Ionicons
  3. Fonts
  4. Frontend Development