Create an icon font with IcoMoon

Learn how to create a icon font for your iOS & Android mobile application with IcoMoon and get lightweight vector icons in just one file!

IcoMoon offers icons sets (both free and commercial) and a web app for creating your own icon font.

Why use or create an icon font on your app?

The biggest reason for creating an icon font for your mobile application is to have one lightweight file for all platforms, resolutions, colors and sizes without losing quality!

Fonts are vector files. If you use or create a font file with your required icons, you can use it on a simple label or button.

Getting start

Go to the IcoMoon App and start by creating your account.

This is optional but if you clear your browser cache, you will loose your projects. An account is also useful if you work with a team and need to share your icon fonts.

Icomoon Step 01

Icomoon Step 02

Create your first project

Now, you can go to the “Project Manager” in the top left menu and rename the title “Untitled Project” to that of your project and click “Load”.

On this screen, you can export (Download) and import your projects (configuration and SVG format).

Icomoon Step 04

Add icons

If you don’t have your own icons, you can add existing icon sets like Entypo, Brankic 1979 etc from the “Library” (Menu (top left) => Icon Library) and choose a free font or buy one.

Icomoon Step 03

Remove all default icon sets

In this howto, we are going to create an icon set from our own SVG files and start by removing all default icon sets.

On icon set menu, click on “Remove Set”.

Icomoon Step 05

Import SVG file

IcoMoon is only compatible with SVG (no EPS, AI, …).

We going to use the free Flat Icon Set vol 1.0 from freepik.com with 380 icons (SVG with fill & stroke version).

If your design is only in BITMAP format like PNG with high resolution (300dpi min), you can convert it to SVG format with this online converter.

Icomoon Step 06

After the import of your first icon, you can edit information about your new icon set like name, URL, designer, etc.

Icomoon Step 07

Edit icon

If your icon does not have the good size, position etc you can edit it.

First click the Edit button and then the icon you want to edit.

Icomoon Step 08

First change the size of the grid to 24 or 32 and use the same grid for all others icons.

In this screen, you can rotate, mirror, change size and positioning your icon on the grid. The tag name is the name of the CSS class when you use your font on your website.

Icomoon Step 09

After editing, you can close this modal window via the cross on top right.

Icomoon Step 10

For all other imports, use the icon set menu instead the “Import Icons” button or else it will create a new icon set…

Icomoon Step 11

You can move, delete or edit all your icons via the tools menu.

Don’t forget to select all icons you want in your font (first item of tools menu). Selected icons are marked by a yellow border.

Is your selection ready? Click on the “Font” button to create your font.

Icomoon Step 12

Create your font

On this screen, you can edit the preferences of your font (“Preferences” button on top left) and configure metadata (important).

On the center of this screen, you see all information to use your font (character to copy on your label, name of CSS class, etc).

Icomoon Step 13

Font metadata

You can change the name of your font (don’t use space or other special character if you want to use your font on iOS & Android) and others information like the designer, licence and version.

In this howto, we use TiDev as the name of the font.

Icomoon Step 14

Download your font

After editing your preference, you’re ready to download your font.

Click on the “Download” button on the previous screen.

In the ZIP archive, you have:

  • Font for desktop and mobile (fonts/*.ttf)
  • Fonts for Web (fonts/*.eof, *.svg, *.woff)
  • Documentation in HTML format (/demo-files/demo.html)
  • IcoMoon configuration for this font (/selection.json)
  • CSS file with class for use in BootStrap Twitter (/style.css)

Icomoon Step 15

How to use your font

To use your font with Titanium (Classic or Alloy) or with native iOS and Android, you have to get it right name.

For iOS, the PostScript name is use to identify your font. Android use the filename.

If you don’t want to have to use different names for iOS and Android, it’s important to have the PostScript name as the filename.

When we created the font, we used the name TiDev in the metadata. IcoMoon will also use this name as the filename.

Icomoon Step 16

Icomoon Step 17

How to use custom fonts in Titanium project?

You have your font file (*.tff), the right PostScript name for iOS, the right filename for Android ? OK!

Custom fonts are automatically loaded for Android and iOS (since SDK 3.2). You don’t have to add them to tiapp.xml.

Titanium Classic

Create a “font” directory in the /Resources directory and paste your font file.

In your code:

var label = Ti.UI.createLabel({
  color: "#336699",
  font: {
    fontFamily: "TiDev",
    fontSize: "32sp"
  }
});

Titanium Alloy

Create a “font” directory in the “/app/assets” directory and paste your font file.

In your TSS:

"#myLabel": {
  color: "#336699",
  font: {
    fontFamily: "TiDev",
    fontSize: "32sp"
  }
}

Example

I develop all my mobile apps with custom fonts and use same icons for landing page with the Web version of the font.

Icomoon Step 18

Find free icon sets

If your not a designer (like me), you can find a lot of free icon sets on the Web.

I have a big collection of mobile & tablet screenshots for inspiration and free resources on my Pinterest account:

Damien is the technical expert of Isiapps, Appcelerator Premium Partner for France. With 15 years experience in Web, he discovered and started mobile development with Appcelerator Titanium at version 0.8. TCE, TCD, TCMD & TCAD certified developer, trainer and Titanium Titan, organize Montpellier Mobile Meetup (France, he use Titanium, ACS, Node.js, Appcelerator Platform and love design. He live in Montpellier (France).


Comments