Agile Toolkit Icon Set

by Mayack

Designed for Agile Toolkit

Icons are an important detail of every website's or web application's UI and that is why we have designed our own icon set for the Agile Toolkit framework. The icon set consists of 128 icons in 16x16 pixel size with a multiple background shape choice. Within seconds you are able to create your own icon set that will match your design requirements.

Live Showcase

Basic

Arrows

Player

Fun

Technics, tools

Navigation

Text

Office

Currencies

Choose icon background color:

Mouse over icons to get their class names.

Download:

Agile Toolkit Icon Set
.PSD, HTML & CSS files, Demos

Using the icon set in Agile Toolkit

Agile Toolkit is a Web UI and back-end library. It brings a number of visual objects into PHP5 such as Buttons, Forms, Tables, Menus, Trees etc. It focuses on development flexibility and helps web developers write less code.

Our icon-sets are already integrated with Agile Toolkit. In order to use the icon set, you can use "Icon" class in your code.


$p->add('Icon')

  ->setColor('orange')

  ->set('basic-search');

We also have a demonstration.

Create your own set of icons

To create your own icon set read the detailed guide below, it can surely help developers and Photoshop beginners:

Open up agile-toolkit-128x16x16.psd from the ZIP package. You will notice that there are several icon sets prepared with different background shapes; circles, squares, rounded squares etc.
Each icon set has its own layer group, so choose the most suitable set for you, then open the BG SHAPE layer folder, select one of the shape layers and apply blending options you want.

Outer glow, outer stroke, drop shadows will not work, since icon's overall size will be out of 16x16 boundries.
Copy the layer style and paste it to all the shape layers within a folder.
The icon set is designed and ready to be exported. Hide the background layer so the whole document is transparent, afterwards open the Save For Web dialog and select the slice with your icon set, next – open Slice Options and name the slice. Save it in your project's folder.
Copy atk-icons.css file to your project's folder and specify it in <head> tag of your HTML file:
<link src="atk-icons.css" rel="stylesheet" type="text/css" />
Open your website's .css file and insert this line of code:
.atk-icons-red {background-image:url(atk-icons-red.png);}
This example works on condition that all the files are in the same directory, otherwise you will have to specify a more detailed path.
Create your first icon by placing the following HTML code:
<i class="atk-icon atk-icons-red atk-icon-basic-search"></i>
As you can see we have 3 classes here:
atk-icon is the basic class, atk-icons-red class defines the colour, atk-icon-basic-search class defines the particular icon.
Voilà, here is your icon – Google it!

If the icon needs to be placed on the right, use additional class 'atk-icon-right'.