branding/icons/README.md

2.3 KiB

/icons

The original.svg file contains the original Inkscape file which all generated icons derive from. It should not be used directly.

Sizes

All icons must be generated in the following sizes:

Width Height File path
48px 48px /icons/[Extension]/48x48.[Extension]
57px 57px /icons/[Extension]/57x57.[Extension]
60px 60px /icons/[Extension]/60x60.[Extension]
72px 72px /icons/[Extension]/72x72.[Extension]
76px 76px /icons/[Extension]/76x76.[Extension]
96px 96px /icons/[Extension]/96x96.[Extension]
120px 120px /icons/[Extension]/120x120.[Extension]
144px 144px /icons/[Extension]/144x144.[Extension]
152px 152px /icons/[Extension]/152x152.[Extension]
180px 180px /icons/[Extension]/180x180.[Extension]
192px 192px /icons/[Extension]/192x192.[Extension]
256px 256px /icons/[Extension]/256x256.[Extension]
384px 384px /icons/[Extension]/384x384.[Extension]
512px 512px /icons/[Extension]/512x512.[Extension]

Bitmaps

A lossless-quality 512x512px bitmap should be generated from original.svg which will be used as the base for generating bitmap in the required sizes.

Use the lossless bitmap with Squoosh.app to generate the required sizes. The following Squoosh preset overrides should be used when generating:

AVIF

  • Encoder: OxiPNG
  • Reduce palette: On
    • Colors: 18
  • Quality: 40
  • Effort: 10

PNG

  • Encoder: OxiPNG
  • Reduce palette: On
    • Colors: 18
  • Effort: 6

WebP

  • Encoder: WebP
  • Reduce palette: On
    • Colors: 18
  • Effort: 6
  • Quality: 41

Vectors

Use the original.svg file to generate SVG files of the required sizes.

All generated SVG:s should be imported to SVGOMG and exported with the default settings except:

  • Number precision: 2
  • Transform precision: 3