Do
- Keep the 20 % padding around the glyph.
- Use a white or single-colour glyph on a clean background.
- Show the squircle, not a square or circle.
Branding
The icon, taken apart.
One glyph, four strokes, and a Google-style squircle. Here is how it is built, the colours behind it, and the source files for every concept we showed.
Anatomy
Four strokes on a 24 × 24 grid, centred in a 100 × 100 squircle with 20 % padding.
- 1Dish
A closed quarter-arc, radius 7.31. The anchor of the mark.
M4 10a7.31 7.31 0 0 0 10 10Z - 2Feed arm
A short diagonal tying the dish to the signal.
m9 15 3-3 - 3Inner wave
Radius-6 arc centred on the dish.
M17 13a6 6 0 0 0-6-6 - 4Outer wave
Radius-10 arc that closes the composition.
M21 13A10 10 0 0 0 11 3
- Canvas
- Vector · viewBox 100
- Glyph
- 60 × 60 · offset 20
- Glyph grid
- 24 × 24
- Stroke
- 1.8 · round caps/joins
- Padding
- 20 % each side
The Google-style squircle
Four cubic curves with control points pulled toward the corners give a softer shape than a plain corner radius.
M50,2 C12,2 2,12 2,50 C2,88 12,98 50,98 C88,98 98,88 98,50 C98,12 88,2 50,2 ZColour
Click a swatch to copy its HEX.
Icon concepts
These are concepts for the community vote, not final app icons. SVG scales without loss, and PNG exports at any size up to 4096 px.
PNG size
Usage
Don’t
- Don’t stretch or rotate the glyph.
- Don’t change stroke weight or end caps.
- Don’t put text inside the icon.