MockupTiger icons are pure Vectors and they are drawn directly on the HTML5 canvas element.

Here is a quick overview of things you can do with Icons.

  • How to add icons
    • just drag from the Icons panel to the canvas in the middle
    • Use the Quick Search in the top tool bar

 

  • How to Paint Icons
    • Use the Fill color (near lock icon) in the tool bar

 

  • How to de-paint or show an empty icon
    • select the icon, invoke the Fill color and click on the empty region of the color picker

 

  • How to clone Icon
    • select Icon, ctrl+c and ctrl+v
    • right click on Icon and select "Duplicate"

Image

 

 

 

 

 

 

 

 

 

 

 

 

How to write text inside Icons?

Double click icon and write the text. The text might appear slightly off depending on the shape of the icon. To adjust the X-Y positioning, right click on the Icon and adjust the X and Y co-ordinates

Image

 

 

 

 

 

 

 

 

How to resize Icons to same width, height or both

Select all the Icons of different sizes and then right click on the Icon whose size you want to impose on the remaining icons.

Image

 

 

 

 

 

 

 

 

 

Image

Related posts:

  1. How to add Icons inside any Text component
  2. How to use Mockups Vector Icons
  3. Mockup Update : Integrated Vector Icons and Project Browser
  4. KPI widget Mockup for Dashboards
  5. Wireframe Icons – Powerful weapon in the whole mockup arsenal

Posted in Tutorials