Skip to content

Sizing scale

Jump to bottom
Jules edited this page May 12, 2023 · 11 revisions

Acorn Icons come in a few different sizes in order to support Firefox desktop and mobile icon sizing conventions.

Our icon sizes also depend on the context that they are used within Firefox, therefore not all icons come in all sizes.

Additionally, due to the difference in file naming conventions between Firefox desktop and mobile codebases, Acorn Icons sizing scale naming convention differs between file formats. Navigate to "File naming conventions" to learn more about our file naming conventions.

Desktop

The default size for desktop icons is 16x16.

More guidelines coming soon when we release desktop icons.

Mobile

The default size for mobile icons is 24x24.

Android

On Android, our sizing scale uses numbers based on the actual icon size:

  • 8 (8x8)
  • 16 (16x16)
  • 20 (20x20)
  • 24 (24x24)

iOS

iOS’s sizing scale uses words instead:

  • Small (16x16)
  • Medium (20x20)
  • Large (24x24)

Note that iOS does not contain any 8x8 icons, so the scale starts at "Small"

Clone this wiki locally