built for Appcelerator    Open Mobile Marketplace

Overview

An indispensible module for rapid mobile application development on Appcelerator.

487 vector-based, commonly used icons in one true-type font and easy-to-use package. Icons can be scaled and styled by font attributes without loss of quality at any size.

Icons are completely free for commercial use. See the licence.

App Icons Logo

Features and Benefits

Time-saving

Fast development cycle - no need to go back to image program to resize icon or change icon color. Simply changing the font attributes will do the job.

High quality

Font is vector-based. Icons are scalable without losing quality at any size. Works on both regular and retina displays.


Money-saving

Download once and use in as many projects as you want.

Multi-platforms

Works beautifully on both iOS and Android platforms.


Plenty of samples

Plenty of sample codes are provided for inspiration.

A utility function is provided to convert font into icon image at any size for UI elements where image is required.


Installation

Titanium

  1. Download the package from Appcelerator Marketplace (link pending confirmation).
  2. Unzip the downloaded package. Copy the icons.js file into your project Resources directory.
  3. Follow the instructions from Appcelerator to install icon font AppIcons.ttf
  4. Include icons.js module into your project, e.g. var icons = require('icons');.

Titanium Alloy

  1. The existing custom font installation instructions from Appcelerator to copy the font file to the Resources/fonts/ directory won't work for Alloy. The font file AppIcons.ttf should be copied to the directory app/assets/fonts/ instead. It will be copied to the Resources directory automatically during rebuild.
  2. For iOS, the extra step (modifying Info.plist) in the existing custom font installation instructions is still required to get the custom font working.
  3. Copy the module file icons.js to the app/assets/ directory. It will be copied to the Resources/ directory automatically during rebuild.

You are all set to to go. To use the icon simply put icons.icon_name in places where string is expected. See the following sample codes for inspiration.

In places where icon image is required, a simple function is provided below to convert the icon from font text into image.

Note:
This is a Javascript module and doesn't require rebuilding the binary. If you encounter error during project rebuild, clean the build folder (Project -> Clean...) and follow the installation instructions to try again.

Sample Codes

App Icons Font in Creative UI

A creative use of App Icons:
var win = Ti.UI.createWindow({backgroundImage:'/background.jpg'});

[ {index:0, icon: icons.cog,           text: 'SETTINGS'},
  {index:1, icon: icons.search,        text: 'SEARCH'  },
  {index:2, icon: icons.shopping_cart, text: 'STORE'   },
  {index:3, icon: icons.camera,        text: 'CAMERA'  }

].forEach(function(item){
    win.add (Ti.UI.createLabel({
                text: '   ' + item.icon + '   ' + item.text,
                font: {fontFamily: 'AppIcons', fontSize:'24dp' },
                color: '#fff',
                backgroundColor: '#444',
                left: 0, right: '20%',
                top: (item.index*70 + 30) + 'dp',
                height: '60dp',
                opacity: 0.9
        })
    );
});

win.open();

Screen Shots

On iOS:
App Icons on UI (iOS)
On Android:
App Icons on UI (Android)

App Icons Font in Google+ Style UI

Using App Icons to create Google+ style UI:
var dFactor = (Ti.Platform.displayCaps.logicalDensityFactor ?
               Ti.Platform.displayCaps.logicalDensityFactor : 1);

var win = Ti.UI.createWindow({backgroundColor: '#d8d8d8'});

// bottom bar
var funcBar = Ti.UI.createView({
                backgroundColor:'#111',
                left: 0, bottom: 0,
                height: '42dp', width: '100%'
            });

[ {index: 0, text: icons.camera + ' Photo', color: '#4682EA'},
  {index: 1, text: icons.link   + ' Link',  color: '#F2B32A'},
  {index: 2, text: icons.pencil + ' Write', color: '#56A845'}

].forEach(function(item){
    funcBar.add(
        Ti.UI.createLabel( {
            text: item.text,  color: item.color,
            font: {fontFamily: 'AppIcons', fontSize:'18dp' },
            center: {x:(item.index*33.33+16.67)+'%', y:'50%'}
        })
    );
});
win.add(funcBar);

// top bar
var topBar = Ti.UI.createView({
                backgroundColor:'#fff',
                left: 0, top: 0,
                height: '45dp', width: '100%' });

topBar.add ( Ti.UI.createLabel({
                text: icons.x_mark, color: '#888',
                left:  '10dp', top: '10dp',
                font: {fontFamily: 'AppIcons', fontSize:'24dp' } }));
topBar.add ( Ti.UI.createLabel({
                text: icons.tick, color: '#888',
                right:  '10dp', top: '10dp',
                font: {fontFamily: 'AppIcons', fontSize:'24dp' } }));
win.add(topBar);

// middle boxes
win.add ( Ti.UI.createLabel({
            text: '  ' + icons.user + '  User', color: '#4682EA',
            left: '5dp', right:  '5dp', top: '50dp', height: '40dp',
            font: {fontFamily: 'AppIcons', fontSize:'24dp' },
            backgroundColor: '#fff',
            borderRadius: 4 * dFactor }));
win.add ( Ti.UI.createLabel({
            text: '  ' + icons.map_marker + '  Location', color: '#DB4C3F',
            left: '5dp', right:  '5dp', top: '95dp', height: '40dp',
            font: {fontFamily: 'AppIcons', fontSize:'24dp' },
            backgroundColor: '#fff',
            borderRadius: 4 * dFactor }));

// icon buttons
[ {index: 0, title: icons.camera,        bgColor: '#4682EA'},
  {index: 1, title: icons.picture,       bgColor: '#F2B32A'},
  {index: 2, title: icons.stopwatch,     bgColor: '#DB4C3F'},
  {index: 3, title: icons.tag,           bgColor: '#56A845'},
  {index: 4, title: icons.thumbs_up_alt, bgColor: '#DB51C2'}

].forEach(function(item){
        win.add ( Ti.UI.createButton({
                    title: item.title, backgroundColor:item.bgColor,
                    font: {fontFamily: 'AppIcons', fontSize:'24dp' },
                    color: 'white',
                    backgroundImage: 'NONE',
                    borderRadius: 4 * dFactor,
                    borderWidth: 0,
                    height: '46dp', width: '46dp',
                    top: '150dp', left: (item.index*56+10)+'dp'
                }));
});

win.open();

Screen Shots

On iOS:
App Icons on UI (iOS)
On Android:
App Icons on UI (Android)
 

App Icons Font in Label as Background

A simple demo program using App Icons in the label as window background. This example shows scaling up the icon font won't lose its quality.
var icons = require('/ui/icons');
var win   = Ti.UI.createWindow({backgroundColor:'#A6061A'});

win.add(
    Ti.UI.createLabel( {
        text: icons.smile,
        font: { fontFamily: 'AppIcons',
                fontSize: Ti.Platform.displayCaps.platformWidth * 0.8 },
        color: '#96000A',
        center: {x:'50%', y:'63%'}
    })
);

[ {index:0, icon: icons.food,    text: 'Restaurants'},
  {index:1, icon: icons.coffee,  text: 'Coffee'     },
  {index:2, icon: icons.glass,   text: 'Bars'       }

].forEach(function(item){
    win.add (Ti.UI.createLabel({
                text: '   ' + item.icon + '   ' + item.text,
                font: {fontFamily: 'AppIcons', fontSize:'18dp' },
                color: '#fff', backgroundColor: '#96000A',
                left: '35%', right: 0, height: '36dp',
                top: (item.index*37 + 20) + 'dp'
        })
    );
});

win.open();

Screen Shots

On iOS:
App Icons on Label (iOS)
On Android:
App Icons on Label (Android)
 

Creating Icon Image from App Icons Font

App Icons font works well where text is expected (e.g. title and text fields). However, some UI elements require icon image (see examples below). The following sample code creates an icon image from the App Icons font and stores it in the application storage area.

The function can be easily extended to create icon image with background color and border.

var icons = require('/ui/icons');

function createIconFile (iconName, imgSize, imgColor) {

    imgColor = imgColor || 'white';

    var // e.g. fileName : icon-edit-30-white.png
        fileName = 'icon-' + iconName + '-' + imgSize + '-' + imgColor + '.png',
        file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, fileName);

    if (!file.exists())
    {
        var iconLabel = Ti.UI.createLabel({
                        font: {
                            fontFamily: 'AppIcons', 
                            fontSize: (imgSize * 0.8) + 'dp',
                            fontWeight: 'normal'
                        },
                        color: imgColor,
                        backgroundColor:'transparent',
                        height: imgSize + 'dp',
                        width: imgSize + 'dp',
                        text: icons[iconName],
                        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
                        verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER
                    });
        var blob = iconLabel.toImage();

        if (blob.media)  blob=blob.media;    // fix for Android

        file.write(blob);
    }

    return file.nativePath;
},
 

Icon Image in Tabs / Tab Group

The following sample code demonstrates using the icon images created by createIconFile() in tabs / tab group.

var iSize = (Ti.Platform.osname === 'android' ? 72 : 36);

var tabGroup = Ti.UI.createTabGroup();

[ {index: 0, icon: 'time',      title: 'Recent'   },
  {index: 1, icon: 'edit',      title: 'Edit'     },
  {index: 2, icon: 'dashboard', title: 'Dashboard'},
  {index: 3, icon: 'cog',       title: 'Setup'    }

].forEach(function(item)
{
    var icon = createIconFile(item.icon, iSize),
        win  = Ti.UI.createWindow({title: item.title, backgroundColor: '#eee'}),
        tab  = Ti.UI.createTab({icon: icon, title: item.title, window: win});

    if (!item.index)    // The first tab
    {
        [ {index: 0, icon: icons.envelope_alt, color: '#AD000C', title: 'Mail'},
          {index: 1, icon: icons.voice_mail,   color: '#1C7EE0', title: 'Voice Mail'},
          {index: 2, icon: icons.star,         color: '#00C173', title: 'Rating'},
          {index: 3, icon: icons.archive,      color: '#FCAB23', title: 'Backup'}

        ].forEach(function(sitem)
        {
            var bgView = Ti.UI.createView({
                            backgroundColor: '#fff',
                            left: '10%', right: '10%', height: '60dp',
                            top: (sitem.index*62 + 30) + 'dp'});

            bgView.add(Ti.UI.createLabel({
                    text: sitem.icon,
                    font: {fontFamily: 'AppIcons', fontSize:'32dp'},
                    color: sitem.color, left: '10dp'
            }));
            bgView.add(Ti.UI.createLabel({
                    text: sitem.title, font: {fontSize:'20dp'},
                    color: 'black', left: '60dp'
            }));
            bgView.add(Ti.UI.createLabel({
                    text: icons.chevron_right,
                    font: {fontFamily: 'AppIcons', fontSize:'24dp'},
                    color: '#aaa', right: '10dp'
            }));

            win.add(bgView);
        });
    }

    tabGroup.addTab(tab);
});
// open tab group
tabGroup.open();

Screen Shots

On iOS:
Icon Images on Tab (iOS)
On Android:
Icon Images on Tab (Android)
 

Icon Image in Dashboard View (iOS)

The following sample code shows how to use the icon images created by createIconFile() in dashboard view.

var win = Ti.UI.createWindow({
                backgroundImage: '/dark_pattern.png',
                backgroundRepeat: true
            });
var label = Ti.UI.createLabel({
                color: 'white',
                font: { fontSize: 16 },
                text: 'App Icons Images in Dashboard View',
                textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
                top: 10, height: 40, width: 300
            });

win.add(label);

var iSize = 72,
    dashboardData = [];

[   { icon: createIconFile('home',          iSize), badge:  10 },
    { icon: createIconFile('phone',         iSize), badge:   2 },
    { icon: createIconFile('calendar',      iSize), badge:   2 },
    { icon: createIconFile('tasks',         iSize), badge:   5 },
    { icon: createIconFile('inbox',         iSize), badge: 126 },
    { icon: createIconFile('user',          iSize), badge:   3 },
    { icon: createIconFile('camera',        iSize, '#999') },
    { icon: createIconFile('microphone',    iSize, '#999') },
    { icon: createIconFile('signout',       iSize, '#AD000C') }

].forEach( function(item)
{
    dashboardData.push(
            Ti.UI.createDashboardItem({
                badge: item.badge, image: item.icon
            })
        );
});

var dashboard = Ti.UI.createDashboardView({
                    data: dashboardData,
                    wobble: true, top: 70
                });

win.add(dashboard);
win.open();

Screen Shots

On iOS:
Icon Images on Dashboard View (iOS)
On Android:
Dashboard View is iOS specific UI.
 

Icon Image in Button Bar (iOS)

The following sample code uses the icon images created by createIconFile() in the button bar.

var icon1 = createIconFile('camera',         24),
    icon2 = createIconFile('facetime_video', 24),
    icon3 = createIconFile('search',         24),
    icon4 = createIconFile('share_alt2',     24);

var win  = Ti.UI.createWindow({backgroundColor:'#eee'});

win.add (Ti.UI.createButtonBar({
            labels:[{image: icon1}, {image: icon2},
                    {image: icon3}, {image: icon4} ],
            backgroundColor:'#336699',
            style:Ti.UI.iPhone.SystemButtonStyle.BAR,
            top:20, height:32, width:'80%'
        })
);
win.add (Ti.UI.createImageView({
            image: '/StPeter.jpg',
            borderWidth: 0, borderRadius: 8,
            width: '80%', top: 64
}));

[
  {index: 0, color: '#F20010', icon: icons.map},
  {index: 1, color: '#1C7EE0', icon: icons.map_marker},
  {index: 2, color: '#00B36A', icon: icons.direction},
  {index: 3, color: '#FCAB23', icon: icons.star}

].forEach(function(item){
    win.add (Ti.UI.createLabel({
                backgroundColor: '#333', color: item.color,
                borderWidth: 0, borderRadius: 8,
                text: item.icon,
                font: {fontFamily: 'AppIcons', fontSize:'24dp'},
                width: 50, height: 50,
                bottom: 16, left: item.index*64+40,
                textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
    }));
});

win.open();

Screen Shots

On iOS:
Icon Images on Button Bar (iOS)
On Android:
Button Bar is iOS specific UI.
 

Using App Icons in Alloy

  1. Add the following line in /app/alloy.js so that the variable 'icons' will be available globally.
    var icons = require('/icons');
  2. In the Alloy style sheet (e.g. index.tss), add the font definition to the element that uses App Icons, e.g.
    "Label": {
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        color: "#000",
        font: {fontFamily: 'AppIcons', fontSize:'14pt' }
    }
  3. Assuming in the Alloy markup (e.g. index.xml), you have the following label definition:
    <Alloy>
        <Window class="container">
            <Label id="label"></Label>
        </Window>
    </Alloy>
    To use the App Icons in the label, set the 'text' property in the controller (e.g. index.js) as follows:
    $.label.text = icons.rss + ' RSS Feed';
    App icons cannot be used directly in the markup file like <Label>icons.rss Test</Label>. It has to be set in the controller.

Icons

List of all icons and their names defined in the icons.js module:


Version History

2.0 latest

  • Greatly improved metrics :-
    • better vertical centering for easy alignment with other UI elements
    • removal of extra right padding on iOS
  • More and better sample codes
  • Addition of 233 new icons (with metrics optimalized for mobile) from :-
  • Change of font licence from CC BY 3.0 to SIL OFL 1.1 (no practical impact to using this module)
  • Icon changes :-
  • in v1.0in v2.0
    apple_logo apple -
    cloud cloud_alt cloud
    download_alt download_alt2 download_alt
    edit edit_alt edit
    file file_text file
    fire fire_alt fire
    github github_alt2 github
    group group_alt group
    indent_left indent_left_alt indent_left
    indent_right indent_right_alt indent_right
    lemon lemon_alt lemon
    link link_alt link
    pencil pencil_alt pencil
    print print_alt print
    pushpin pushpin_alt pushpin
    save save_alt save
    search search_alt search
    trash trash_alt trash
    upload_alt upload_alt2 upload_alt
    youtube youtube_play youtube

1.0

Licence / Credits

Font is licensed under SIL OFL 1.1 for commercial use.

This work was inspired by Bootstrap & Font Awesome.