# Logos en dégradé célèbres : ce que leurs identités nous apprennent

[Canonical HTML page](https://gradiently.design/fr/guide/famous-gradient-logos)

Quelques refontes largement documentées ont fait du dégradé une tendance devenue un élément standard du design de logo. Voici ce qui a changé, et ce que toute marque peut en retenir.

## The short version

- Les logos en dégradé sont devenus courants au milieu des années 2010, quand de grandes applis ont remplacé des icônes détaillées ou à plat par de simples pictogrammes sur des dégradés colorés.
- La refonte d’Instagram en 2016 a remplacé une icône d’appareil photo détaillée par un simple contour d’appareil sur un dégradé du chaud au violet, faisant de la couleur le principal signal de reconnaissance.
- Messenger est passé d’un bleu uni à un dégradé de bleu, violet et rose en 2020, en même temps qu’il introduisait la messagerie entre Instagram et Messenger.
- Le système de marque de Mozilla en 2019 a donné à Firefox et à ses produits associés une famille commune de dégradés vifs, montrant qu’un dégradé peut unir plusieurs signes.
- Les leçons pour tout logo en dégradé : garder une forme simple, conserver une couleur reconnaissable, fixer exactement le dégradé et toujours avoir une version à plat.

Les **logos en dégradé célèbres** sont passés d’inhabituels à omniprésents au milieu des années 2010, quand certaines des applis les plus utilisées au monde sont passées à de simples pictogrammes sur des dégradés colorés. Ce virage a donné aux designers une leçon qui vaut encore : quand un logo apparaît comme un petit carré parmi des dizaines d’autres, la couleur fait plus le travail de reconnaissance que la forme. Les meilleures identités en dégradé associent un signe très simple à un dégradé fixe, distinctif et utilisé partout.

Cet article examine trois refontes largement documentées et en tire des leçons générales. Il décrit ce qui a changé publiquement, pas comment ni pourquoi les entreprises l’ont décidé. Pour l’art d’en fabriquer un, voyez [les logos en dégradé : quand ils fonctionnent](https://gradiently.design/fr/guide/gradient-logo).

## Pourquoi les logos en dégradé ont envahi les icônes d’applis

Les écrans d’accueil des téléphones ont changé ce qu’un logo doit faire. Chaque appli reçoit le même carré arrondi à peu près à la même taille, entouré d’autres. Les illustrations détaillées s’estompent à cette taille, et une couleur unie est partagée avec des dizaines d’autres applis. Un dégradé offre quelque chose entre les deux : une signature de couleur avec plus de combinaisons que l’aplat n’en permet, lisible même quand le pictogramme dessus est trop petit pour être vu nettement.

- Couleurs unies : faciles à partager: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Un dégradé : difficile à confondre: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Les couleurs de marque unies se répètent sur tout un écran d’accueil. Un dégradé précis à plusieurs repères est une signature bien plus rare.

## Instagram, 2016 : le dégradé devient la marque

En mai 2016, Instagram a remplacé son icône d’appareil photo rétro et détaillée par un simple contour d’appareil en blanc sur un dégradé allant du jaune et de l’orange chauds en bas à gauche, en passant par le rose et le magenta, jusqu’au violet en haut à droite. Au lancement, l’entreprise a présenté ces couleurs comme une évolution de la bande arc-en-ciel de l’ancienne icône. La refonte a d’abord suscité de fortes réactions, et le dégradé est resté au cœur de la marque depuis, rafraîchi en 2022 avec une nouvelle police.

Diagonale du chaud au violet: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Un dégradé de la même famille que l’icône de 2016 : chaud à un coin, froid au coin opposé. Une approximation pour l’étude, pas une couleur de marque officielle.

- **Le pictogramme s’est simplifié à mesure que la couleur s’est enrichie.** Un appareil en contour laisse au dégradé la place d’être la partie reconnaissable.
- **Le capital existant a été conservé.** Les couleurs de l’ancienne icône ont été réinterprétées plutôt que jetées.
- **Un trajet diagonal du chaud au froid** donne au dégradé une direction dont on se souvient, pas seulement un ensemble de couleurs.

## Messenger, 2020 : un changement de couleur qui annonçait un changement de produit

En 2020, Messenger a remplacé son logo bleu uni par un dégradé de bleu, de violet et de rose. Le changement est arrivé en même temps que la messagerie entre Instagram et Messenger. La forme, une bulle avec un éclair, est restée : on pouvait donc toujours la retrouver ; seule la couleur a bougé.

- Avant : un seul bleu uni: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Après : du bleu au violet et au rose: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Des approximations de l’avant et de l’après. Garder la forme en changeant la couleur permet à un logo familier d’annoncer quelque chose de nouveau.

La leçon : un dégradé peut dire « ceci a changé » sans perdre la reconnaissance, tant que la forme que l’on connaît reste. C’est un schéma utile pour toute [refonte](https://gradiently.design/fr/guide/rebrand-checklist) : changez un seul signal fort à la fois.

## Firefox, 2019 : une famille de dégradés pour plusieurs produits

En 2019, Mozilla a présenté un nouveau système de marque dans lequel Firefox devenait le nom d’une famille de plusieurs produits. Le logo du navigateur a gardé son renard, simplifié, et la famille a partagé des dégradés vifs de jaune, d’orange, de rouge, de rose et de violet sur les icônes des produits. Chaque icône avait sa propre forme, mais les dégradés partagés les faisaient lire comme des parents.

- Rampe chaude de la famille: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Rampe sœur, décalée: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Sœur plus froide: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Une façon de faire fonctionner une famille de dégradés : décaler la fenêtre le long d’une rampe commune pour que chaque produit ait son propre mélange, tout en restant ensemble.

## Ce que ces identités en dégradé ont en commun

| Identité | Année | Ce qui a changé | Leçon |
| --- | --- | --- | --- |
| Instagram | 2016 | D’un appareil détaillé à un pictogramme en contour sur un dégradé du chaud au violet | Simplifier la forme, laisser la couleur porter la reconnaissance |
| Messenger | 2020 | D’un bleu uni à un dégradé de bleu, violet et rose | Garder la forme, changer la couleur pour signaler une nouveauté |
| Firefox | 2019 | D’un logo de navigateur à une famille aux dégradés communs | Une rampe de dégradé peut unir plusieurs signes |

Les trois posent une forme simple et familière sur un dégradé exact et répété partout.

## Cinq leçons pour votre propre logo en dégradé

1. **Gardez la forme très simple** Le dégradé fait le gros du travail : le signe dessus doit donc être lisible à la taille d’une icône d’appli ou d’un avatar.
2. **Conservez une couleur reconnaissable** Si vous avez déjà une couleur connue, construisez le dégradé à partir d’elle. La reconnaissance déjà acquise mérite d’être gardée.
3. **Fixez exactement le dégradé** Notez chaque repère, chaque position et chaque angle. Un dégradé reconstruit à l’œil dérive, et la reconnaissance dérive avec lui. [La cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) explique pourquoi.
4. **Ayez toujours une version à plat** Les favicons, la broderie, l’impression en une couleur et certaines interfaces ne peuvent pas montrer un dégradé. Choisissez une couleur unie et une version blanche ou noire du pictogramme.
5. **Utilisez le dégradé au-delà du logo** Les meilleurs exemples répètent leur dégradé dans les fonds, les accents et le mouvement, pour qu’il devienne un [actif de marque distinctif](https://gradiently.design/fr/guide/distinctive-brand-assets) à part entière.

```css
.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;
}
```

Une tuile en dégradé avec sa couleur unie déclarée en premier. Noter les repères est ce qui garde le logo identique partout.

Un dégradé peut aussi mal tourner derrière un logo plutôt que dedans. Si votre logo repose sur votre propre dégradé, lisez [poser un logo sur un dégradé](https://gradiently.design/fr/guide/logo-on-gradient-background), et pour bâtir toute une identité autour d’un dégradé, [l’identité de marque en dégradé](https://gradiently.design/fr/guide/gradient-branding).

## FAQ

### Quand Instagram est-il passé à un logo en dégradé ?

En mai 2016, quand il a remplacé son icône d’appareil photo détaillée par un simple contour d’appareil sur un dégradé allant du jaune et de l’orange au violet en passant par le rose.

### Pourquoi tant d’applis utilisent-elles des logos en dégradé ?

Les icônes d’applis partagent toutes le même petit carré arrondi : la couleur fait donc l’essentiel de la reconnaissance. Un dégradé précis est plus distinctif qu’une couleur unie.

### Les logos en dégradé fonctionnent-ils à l’impression ?

Souvent avec soin. Les dégradés peuvent former des bandes ou se décaler à l’impression : chaque logo en dégradé doit donc aussi avoir une version en couleur unie et des versions noir et blanc en une couleur.

### Comment faire un logo en dégradé qui reste reconnaissable ?

Utilisez une forme simple, fixez les repères et l’angle exacts, répétez le dégradé dans toute votre marque et gardez un repli à plat pour les petits usages ou les usages limités.