Firefox OS app icons

Basics

A Firefox OS application icon is a 60x60 pixel image provided in 24-bit PNG format. Each of the standard OS application icons is contained within or underlayed with a 58 pixel diameter circle shape.

Icon template
60x60 pixel canvas
58 pixel diameter circle
Circle container
Circle container
Object + circle underlay
Object + circle underlay
Object integrated with circle
Object integrated with circle

A drop shadow is automatically generated based on the icon’s silhouette shape; do not include a drop shadow in the image you provide.

Correct way to provide icon
Correct way to provide icon
Automatically generated drop shadow
Automatically generated drop shadow
Incorrect
Incorrect

Common Silhouette Shapes & Recommended Sizing

Please follow the suggested sizing for common shapes below.

If your icon has a unique silhouette, it is important that you gauge the weight of it in relation to the standard set of Firefox OS icons for maximum consistency. A PSD template has been provided for you to drop your icon in to test for proper sizing. See: MozillaFXOSIconGrid.PSD

Do

Circle example
If you use a circle, it should have a diameter of 58 pixels
Rounded square example
Rounded square 8 pixel radius corners
Square example
Square 1 pixel radius corners

Don't

Do not do: Circle example
Do not do: Rounded square example
Do not do: Square example

Circle Shape

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.

a)

Your logo/icon
Your logo/icon
Cropped
Cropped with 58 pixel diameter circle
Overlay
Optional overlay supplied by Mozilla can be applied
Final
Final

b)

Your logo/icon
Your logo/icon
Icon with underlay
Add circular underlay provided by Mozilla
Adjust colors
Adjust colors

c)

You can also make the object in front ‘break frame’, extending beyond the circle, as in the following example:

Your logo/icon
Your logo/icon
Underlay
Add circular underlay provided by Mozilla
Adjust colors
Adjust colors

Examples

Example icon
Example icon
Example icon
Example icon
Example icon
Example icon

Download

Getting started templates

Icon (circle)

Icon (rounded)

Icon (square)

Icon grid

Please note that the above guideline is for use with Firefox OS. Before submitting your application to the Marketplace, please check the Marketplace Guidelines for further details.