Firefox OS action icons

Prev Next

Basics

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.

Color

Standard

#FFFFFF

Dark on Light

#2C393B

Favorite (Browser) Toggle color as shown below

#FCCB00 to FF9500

Mark (Email) Toggle color as shown below

#EC1313

Drop shadows

For headers and toolbars:

Drop shadow (Photoshop)

Color: #000000
Blend mode: Normal
Opacity: 20%
Angle: 120
User Global Light: No
Distance: 1
Spread: 0
Size: 0

For buttons:

No drop shadow

For light backgrounds:

Drop shadow (same as above)

Design principles

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.

Icon examples

Complex forms can be achieved using radiused square, circle, & ellipse.

Icon examples

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.

Conventions

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.

Line weights

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.

Line weights: 2.4 pixels and 1.2 pixels

Radiused Corners

Radiused corners come in two sizes. Use as you feel appropriate.

1.25 pixel radius or 2.5 pixel radius

Arrows

The use of arrow heads differs when it comes to navigation and non navigation UI.

There are 3 types of arrows:

Data transfer: E-Mail Send & Forward shown (half radiused square head)

Documents

Documents are represented by a 45 degree cut line on the top-left corner of a radiused square.

Document icons</

Building blocks

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.