Icon Tool
To add an icon select the Icon tool (heart icon) from the toolbar, then click anywhere in the page or canvas.
There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, opacity, adjusting rotation and corner radius, adding a new state, changing the icon, choosing the color, adding a drop shadow or performing a click-to action.
Refer to the image above to identify icon properties panels.
- Width and height
- Opacity
- Rotation
- Icon
- Drop Shadow
Learn more about how to use icon properties below.
Width and height
Those properties allow changing the size of the image, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, just click and drag, and release after the perfect size is reached.
Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).
The icon resize will be done proportionally, no matter which property will be changed, the icon will resize proportionally.
For better results, it’s recommendable to keep the size dived to 8px (for example 16, 24, 32, 40, 48, 56 ...)
Opacity
Once dragging or typing another value, icon transparency will change accordingly, it could be from 0 to 100.
Rotation
Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, just click and drag, and release after the ideal angle is reached.
Right drag - the icon will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).
Alternatively pressing on the number will allow typing the exact degree amount.
Icon
Clicking this property will allow choosing the icon, it could be any icon from suggested Material Icons or it could be another one that could be found while searching.
Just press on the Search title and type anything you want.
Drop Shadow
This property is usually used for giving the impression that the object is raised above the objects behind it.
Just press on the toggle icon to activate this property.
By default, it will be assigned a black color (#000000) with 80% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.
Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.
Play around with all the options, once happy just click anywhere on the canvas or proceed straight to any other property or element.