This document discusses icon fonts and vector images for use in iOS apps. It describes icon fonts as fonts that contain symbols and icons rather than letters and numbers. Icon fonts are scalable, smaller in file size than pixel images, and allow for flexibility and interactivity. The document recommends adding icon font files to a project and plist, and provides tools for converting SVG files to TTF format for use as icon fonts. It also describes vector images as objects defined mathematically that are crisp at any resolution and have smaller file sizes than bitmaps.

1. S
Icon Fonts & Vector
Drawable in iOS apps
Samarth Singla

2. S
Agenda
• What are Icon Fonts?
• Benefits of using Icon Fonts
• How to use Icon Fonts?
• Convert SVG Files to TTF Format
• Vector Images
• How to use Vector Images?

3. What are Icon Fonts?
Icon fonts are just fonts, instead of containing
letters or numbers, they contain symbols and
icons.
We can use them in project the same way we use
regular text font.

4. Why to use Icon Fonts?
S Scalability: Font-based icons are resolution independent
and can be scaled to any desired extent. The icons will look
crisp regardless of retina, HDPI, XHDPI and so on
S Size: Cut into the right proportion, an icon font has an
incredibly smaller file size than a set of pixel images
S Maintainability: Since the icons are going to be packaged
into a single font file, there is only one file to maintain
throughout the project

5. Contd..
S Adoption: There are numerous free and professional tools
that help to incorporate them easily
S Flexibility: Any request to change color, size, or appearance
can be made on the fly and tested by changing only a few
lines of code
S Interactivity: Icon fonts allow to show different states,
apply effects and create animations with no effort at all.

6. How to use icon fonts?
S Add .ttf files to project and add .ttf file name in plist file
under “Fonts provided by application” key.

10. SVG to TTF files
S FontForge tool can be used to
convert the .svg files into .otf
files
S otf2ttf can be used to
convert .otf to .ttf files

11. Vector Images
S Vector images differ from bitmaps that are made of pixels
S Vector images are made up of various “objects”
S Objects mean lines and shapes
S Defined mathematically by a set of algorithms or formulas,
which allow them to be redrawn over and over
S They are crisp images, regardless of resolution or pixel ratio
S They have smaller file size

13. References
S https://www.innoq.com/en/blog/vector-assets-in-ios-xcode/
S http://www.hiland.com/knowledge-base/bitmap-and-vector-
images-understanding-the-difference/
S http://www.creativebloq.com/app-design/icon-fonts-in-
apps-21410734
S https://www.nativescript.org/blog/details/mobile-app-best-
practices---use-font-instead-of-image-to-show-an-icon

14. Thanks