Working with Icon Fonts in Swift Part 1.

5 min readMay 16, 2020

Icons are the most important aspect for any Mobile to make a better user interface to engage with App users. to make an application more attractive and to generate new user designers put efforts into creating icons for application.

This means a developer has to put many images in the application bundle to solve this problem.

To use icons in your application Apple has provided two ways to add images in an application bundle, that is PNG and vector-based(PDF) images. which leads to an increase in the size of an application

Want to read this story later? Save it in Journal.

The problem in using images for icons in an application

if you use PNG in your application that means you have to create three scale size for every image used in the application
To solve this problem you can you vector-based images in your application.

There is a problem with using these approaches in your application. if you go with the PNG approach there are possible chance images will pixelate if you use a large container for small size images.

To solve this problem there a new approach i.e is using a font-based icon in an application and that will help to reduce app weight and easy management of icon in the application.

An easy way to bring icons into your project is through icon fonts. Icon fonts are like any other font, so you can use them anywhere you can insert text. another advantage of icons from fonts is that they are vector images. This means you can control the size and color programmatically with clean results.

Now let dive into programming to integrate font icons in your application in this small tutorial I am going to use SwiftUI for the design part, swift 5.2 for programming, and XCode 11.4.1 as development IDE.

Adding a font icon in your application is just like adding normal custom font in any iOS application for this you just need icon based fonts.

For generating font for the demo project I have used icomoon App. there are many other tools also available in the market to generate font icons. before starting this tutorial make sure you have downloaded all required assets for your application. find the link in the last of this story. I will also post the compression between the normal approach and icon-based approach at the end of this tutorial.

How to:-

Step 1. Add the font file to your Xcode project.

Step 2. Add font into your application list file.

Step 3. confirm whether the font is added correctly in an application or not.

To check this you can use the below snippet.

for family: String in UIFont.familyNames {
      print("Font Family :----------:", family)
      for names: String in UIFont.fontNames(forFamilyName: family) {
           print("======= \(names)")
      }
}

check the fonts are associated with the project.

If you have done correctly to this step then you have achieved your first milestone for the tutorial, now dive into program part to use these added fonts to your application and let so the world true power of it.

Step 4. Let create enums and extensions in a constants file to define the font and sizes available in the app.

enum FontIcon: String {
     case bitcoin = "\u{ed69}"
     case beatsbydre = "\u{ed63}"
     case apple = "\u{ed3f}"
     case backArrow = "\u{f1ea}"
     case Netflix = "\u{ef25}"
     case chatBubble = "\u{f120}"
     case twitter = "\u{f04a}"
}

Step 5. Now create a SwiftUI Button To showcase your talent.

struct IMButton: View {
    let cornerRadius: Double
    let title: String
    let foregroundColor: Color
    let indicatorColor: Color
    let iconFont: FontIcon
    let iconColor: Color    var body: some View {
        ZStack(alignment: .leading) {
            RoundedRectangle(cornerRadius: 5)
                 .frame(width: .some(300), height: 50)
                 .foregroundColor(foregroundColor)
            LeftCorner(cornerRadius: cornerRadius)
                 .trim(from: 0.39, to: 0.61)
                 .fill(indicatorColor)
                 .frame(width: .some(300), height: 50)
            HStack {
                  Text(iconFont.rawValue)
                      .padding(.leading, 15)
                      .font(.custom("iconfont", size: 30))
                      .foregroundColor(iconColor)
                  Text(title).bold()
                      .padding(.leading, 20)
                  }
        }
    }
}struct IMButton_Previews: PreviewProvider {
      static var previews: some View {
          IMButton(cornerRadius: 5, title: "Hello", foregroundColor: .red, indicatorColor: .green, iconFont: .apple, iconColor: .blue)
       }
}struct LeftCorner: Shape {
      let cornerRadius: Double
      func path(in rect: CGRect) -> Path {
           return .init(roundedRect: rect, cornerSize: .init(width: cornerRadius, height: cornerRadius))
      }
}

Step 6. Now add your newly created button into your main view

struct ContentView: View {
      var body: some View {
           NavigationView {
               VStack {
                   NavigationLink(destination: DetailView(iconFont: .apple, color: .green)) {
                 IMButton(cornerRadius: 6, title: "Login with Apple", foregroundColor: .yellow, indicatorColor: .red, iconFont: .apple, iconColor: .white)
                 .frame(width: 300, height: 50, alignment: .leading)
                }
           NavigationLink(destination: DetailView(iconFont: .Netflix, color: .red)) {
                 IMButton(cornerRadius: 6, title: "Login with Netflix", foregroundColor: .yellow, indicatorColor: .red, iconFont: .Netflix, iconColor: .green)
                     .frame(width: 300, height: 50, alignment: .leading)
          }
          NavigationLink(destination: DetailView(iconFont: .twitter, color: .blue)) {
                IMButton(cornerRadius: 6, title: "Login with Twitter", foregroundColor: .yellow, indicatorColor: .red, iconFont: .twitter, iconColor: .blue)
                    .frame(width: 300, height: 50, alignment: .leading)
              .navigationBarTitle(Text("Logins"))
                }
         }
     }
 }
}struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
      }
}