h1. How to add package icon in admin panel

There are two ways of displaying icon for Package in Admin Panel main navigation:

Display as icon using Subrion font.

Display as image using your own image.

Here is the instruction how to achieve this:

h3. 1. Display as icon using Subrion font.

We use own Subrion font: for displaying icons.
By default our system retrieves your package name and try to find icon for it in our icon pack using class i-packagename. But there is 98% chance that there is no icon with that class. So in this case we need to add another class:

First of all, choose an icon for your package from the link above. Lets say we chose stats icon (@i-stats@ class and @& # x e 0 1 f ;@ code).
Now open up your @install.xml@ file and to the @hooks@ section add following hook:

..your hooks..


i.i-packagename {
font-family: 'Subrion';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
i.i-packagename:before {
content: '\e01f';


packagename - the name of your package

h3. 2. Display as image.

First, prepare your image: It should be square PNG image starting from size of 32x32 pixels. Put your image icon somewhere in your package folder. For example: @packages/packagename/templates/admin/img/icon.png@

Open up your @install.xml@ file and to the @hooks@ section add following hook:

..your hooks..


i.i-publishing:before {
content: ' ';
background: url({$smarty.const.IA_CLEAR_URL}packages/packagename/templates/admin/img/icon.png);
background-size: 100% 100%;
width: 32px;
height: 32px;
margin: 0 auto;
display: block


Please contact us if you have any questions.