You see lots of pictos in <project name>/touch/resources/themes/images/default/pictos but when you specified it in iconcls like “iconcls: cloud”, the icon does not show up and appears as a square like:


No worry.  Here you will find the steps of how to add icon to Sencha Touch 2 application.


Step 1: Find the icon file

Find the icon file in the <project name>/touch/resources/themes/images/default/pictos folder. You only need to know the file name less the extension.  e.g. cloud

Step 2: vi app.scss file

vi <project name>/resources/sass/app.scss, add this like under “//Your custom code goes here…”:

@include pictos-iconmask('<name of icon>')


@include pictos-iconmask('cloud')

Step 3: Update app.css file with compass

We need to update the application css file (in <project name>/resources/css/app.css) with the definition of the cloud icon. Glad there is a command line tool called “compass” to help us here.  The compass tool will read the configuration file located in <project name>/resources/sass/config.rb which has information like the path to the application css file.  Lets run the compass command like:

# cd <project name>/resources/sass

# compass compile app.scss

Step 4. Done

Now if you go back to the page with the new icon, you should see it now.