The short version
- Gradient logos became mainstream in the mid-2010s, when major apps replaced detailed or flat icons with simple glyphs on colourful gradients.
- Instagram's 2016 redesign replaced a detailed camera icon with a simple camera outline on a warm-to-violet gradient, making colour the main recognition cue.
- Messenger moved from solid blue to a blue, purple and pink gradient in 2020, at the same time as it introduced messaging across Instagram and Messenger.
- Mozilla's 2019 brand system gave Firefox and its related products a shared family of bright gradients, showing how a gradient can unite several marks.
- The lessons for any gradient logo: keep the shape simple, carry recognisable colour forward, fix the gradient exactly, and always have a flat version.
On this page
Famous gradient logos went from unusual to everywhere in the mid-2010s, when some of the most-used apps in the world moved to simple glyphs on colourful gradients. The shift taught designers a lesson that still holds: when a logo appears as a small square among dozens of others, colour does more of the recognition work than shape. The best gradient identities pair a very simple mark with a gradient that is fixed, distinctive and used everywhere.
This article looks at three widely documented redesigns and draws general lessons from them. It describes what changed in public, not how or why the companies decided it. For the craft of making one, see gradient logos: when they work.
Why gradient logos took over app icons
Phone home screens changed what a logo has to do. Every app gets the same rounded square at roughly the same size, surrounded by others. Detailed illustrations blur at that size, and a single flat colour is shared with dozens of other apps. A gradient offers something in between: a colour signature with more combinations than flat colour allows, readable even when the glyph on top is too small to see clearly.
Instagram, 2016: the gradient becomes the brand
In May 2016 Instagram replaced its detailed, retro camera icon with a simple camera outline in white on a gradient running from warm yellow and orange at the lower left, through pink and magenta, to purple at the upper right. At launch, the company presented the colours as an evolution of the rainbow stripe on the old icon. The redesign drew strong reactions at first, and the gradient has stayed at the centre of the brand since, refreshed in 2022 alongside a new typeface.
linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)- The glyph got simpler as the colour got richer. An outline camera leaves room for the gradient to be the recognisable part.
- Existing equity was carried forward. The old icon's colours were reinterpreted rather than thrown away.
- A diagonal warm-to-cool path gives the gradient a direction people can remember, not just a set of colours.
Messenger, 2020: a colour change that signalled a product change
In 2020 Messenger replaced its solid blue logo with a gradient of blue, purple and pink. The change arrived at the same time as messaging between Instagram and Messenger. The shape, a speech bubble with a lightning bolt, stayed, so people could still find it; only the colour moved.
The lesson: a gradient can say "this has changed" without losing recognition, as long as the shape people know stays. That is a useful pattern for any rebrand: change one strong cue at a time.
Firefox, 2019: one gradient family for many products
In 2019 Mozilla introduced a new brand system in which Firefox became a family name for several products. The browser logo kept its fox, simplified, and the family shared bright gradients of yellow, orange, red, pink and purple across the product icons. Each icon had its own shape, but the shared gradients made them read as relatives.
What these gradient identities have in common
| Identity | Year | What changed | Lesson |
|---|---|---|---|
| 2016 | Detailed camera to outline glyph on a warm-to-violet gradient | Simplify the shape, let colour carry recognition | |
| Messenger | 2020 | Solid blue to blue, purple and pink gradient | Keep the shape, change the colour to signal news |
| Firefox | 2019 | One browser logo to a family with shared gradients | A gradient ramp can unite many marks |
Five lessons for your own gradient logo
- 1
Keep the shape very simple
The gradient is doing the talking, so the mark on top should be readable at the size of an app icon or avatar.
- 2
Carry recognisable colour forward
If you already have a known colour, build the gradient from it. Recognition you already earned is worth keeping.
- 3
Fix the gradient exactly
Record every stop, position and angle. A gradient rebuilt by eye drifts, and recognition drifts with it. Brand consistency explains why.
- 4
Always have a flat version
Favicons, embroidery, one-colour print and some interfaces can't show a gradient. Choose one flat colour and a white or black version of the glyph.
- 5
Use the gradient beyond the logo
The strongest examples repeat their gradient in backgrounds, highlights and motion, so it becomes a distinctive brand asset in its own right.
.logo-tile {
/* Flat fallback: the one colour chosen for small or limited uses */
background-color: #d62976;
/* The exact gradient, with every stop recorded */
background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
border-radius: 22%;
aspect-ratio: 1;
}A gradient can also go wrong behind a logo instead of inside it. If your logo sits on your own gradient, read putting a logo on a gradient, and for building a full identity around one, gradient branding.
Questions people ask
When did Instagram switch to a gradient logo?
In May 2016, when it replaced its detailed camera icon with a simple camera outline on a gradient running from yellow and orange through pink to purple.
Why do so many apps use gradient logos?
App icons all share the same small rounded square, so colour does most of the recognition work. A specific gradient is more distinctive than a single flat colour.
Do gradient logos work in print?
Often with care. Gradients can band or shift in print, so every gradient logo should also have a flat colour version and one-colour black and white versions.
How do I make a gradient logo that stays recognisable?
Use a simple shape, fix the exact stops and angle, repeat the gradient across your brand, and keep a flat fallback for small or limited uses.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
