Firefox OS Action Icons
A Firefox OS action icon is a 30x30 image provided in 24-bit PNG format. In some places, the dimensions can vary. For example, active call action icons are 40x40.
Dark on Light
Favorite (Browser) Toggle color as shown below
#FCCB00 to FF9500
Mark (Email) Toggle color as shown below
For Headers and Toolbars:
For Light Backgrounds:
Action Icons should look both confident and approachable.
- Confident means action-oriented and trustworthy.
- Approachable means friendly, inviting the user to touch.
To achieve this look, we take the basic form of a radiused squared (approachable) and intersect it with both straight and elliptical cut lines (confident), as show below.
Complex forms can be achieved using radiused square, circle, & ellipse.
The designer should aim to create an icon that represents the desired function as simply and clearly as possible, while avoiding overly complex or compound ideas.
It is recommended that you either a) crop your icon with a circle shape or b) use a circle shape as a backdrop as in the following examples.
There are two main line weights that should be used. Additional line weights are allowed, but use sparingly if one of these two do not suffice.
Radiused corners come in two sizes. Use as you feel appropriate.
The use of arrow heads differs when it comes to navigation and non navigation UI.
There are 3 types of arrows:
Documents are represented by a 45 degree cut line on the top-left corner of a radiused square.
Designers should re-use existing components wherever possible, to maintain maximum consistency. For example, if you need an ‘X’ or a ‘+’ in your icon, reuse one previously designed. In some cases, it may make more sense to create a new version that better integrates into the overall icon -- this is at the designers’ discretion.
Action Icons Examples
Download Firefox OS action icons in Photoshop or PNG format, or download individual icons.