Linear icons in iOS. You will be happy you learned this.

The experience of managing PNG’s in Xcode for your iOS App is not great. Linear Icons can fix the pain!

Here are some of the pain points.

  • You most likely have to explain to a designer why Xcode and iOS don’t like SVG’s.
  • You have to deal with collecting and testing the @1X, @2X, and @3X versions of everything.
  • No auto complete in code for the items in your .xcassets files.

Enter linear icons.

They already look beautiful! Let us learn how to use them in an iOS App. We will do this in 4 steps and then I have some bonus code for you at the end.

  1. Download and add font file
  2. Add extension to UIFont
  3. Create a struct to access the linear icon font
  4. Examples of the linear font in use

Tools used are Swift 4.2 and xCode 10

Download and add font file

First, you need to download an icon font set. I’m going to use the free version of the IcoMoon general purpose set.

Go into the Font folder of that download and open the Reference.html file in your browser. Notice all the nice Icons and the unicode characters right below them. You will need these for reference very soon.

Next, you want the IcoMoon-Free.ttf file.

Drag that file into your xCode project. Where you put it is up to you but make sure you ‘Copy items if needed’ and add to your app’s target.

Add font file to project.

It should have happened automatically but also make sure the IcoMoon-Free.ttf made it to your app’s targets Build Phases -> Compile Sources.

Add extension to UIFont

If you have ever worked with custom fonts in iOS you probably recall having to add them to your Info.plist file. Here, we will load them dynamically instead. The benefit is that if you want to ship font’s as some sort of dependency (cocoapods). You are instantly set up. You will need to extend UIFont though.

Linear Icon struct

To make the font accessible in code you need to create a struct that can return you a UIFont of a particular size and that can reference the unicode characters of the icons you want to use.

Here is what the struct should look like for now.

Two things to note. First, note that the Icons we will be using very soon are just unicode characters. If you are wondering where I got these head back to the Reference.html file you opened up in your browser earlier. You can knock your self out adding everything right now if you feel like it. Just adding the arrows is good enough for this tutorial.

Second, notice that the func iconFont(_ size: CGSize) -> UIFont function registers the font if it could not be constructed. Feel free to modify this and break out the registration somewhere else if you are not comfortable with the recursive call. A font only needs to be registered using our extension once per app install, not per app launch.

Example

Ok, you will have your small dopamine hit very shortly! You need to get yourself a UILabel or some UIElement that you can assign text to. I don’t care how you do it. I made a simple UIViewController that does not rely on a story board and has one label to play around with.

Notice I used the UILabel just like I would if I added text. I also constrained it flush to the edges of the screen. If you did something similar to me you should see your Icon Font on screen

Congrats! The world of Linear Icons is your oyster. You can change the sizes, change the colors, move them around, what ever. You have scalable iconography now and you have to worry about @1X, @2X, and @3X a lot less. Maybe you can even impress a designer 🙃

As a bonus for your hard work here is a function that will create a UIImage out of an Icon Font. I put this in the IconFont struct I made earlier.

Happy coding! And please clap if you learned something 😁

Written by

I contribute to the start-up grind in Seattle as an iOS Engineer. I also used to fly airplanes.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store