On May 18 Google started rolling out new gradient icons for thirteen of its Workspace apps. Gmail, Drive, Docs, Sheets, Slides, Calendar, Chat, Meet, Vids, Forms, Keep, Voice, and Tasks all got refreshed artwork on the web. The iOS and Android rollouts began this week.
Browse and download 14 Google 2026 SVG icons. Free for personal and commercial use. Copy as SVG, JSX, React component, or CDN link.
thesvg.org
If you build a SaaS dashboard with a "works with Google Workspace" row, or a marketing page that shows the Gmail icon next to your integration copy, you have a small problem. The icons in your codebase are now the old set, and most projects do not have a fast path to refresh them.
Here is what changed, why icon updates take so long to land in OSS libraries, and how to grab the new Google 2026 SVGs today without waiting.
Gradient style, more distinct shape and color per app
Color rule change
Dropped the "all four Google colors" mandate
Gmail exception
Still uses more than one color, the only one in the set
Web rollout
Mid-May 2026
Mobile rollout
Late May 2026
OSS SVGs available at
/
•
•
•
3. Where to grab the Google 2026 SVGs today
The full Google 2026 icon set is live in the open-source library if you want to contribute, file an issue, or fork.
Install via npm:
CODE
npm install thesvg
Or download direct from the site. URLs follow a stable pattern, /icons/[brand]/[variant].svg, so you can wire them into a build step:
CODE
// src/components/GoogleIcon.tsx // Server component or build-time loader, not a runtime fetch in production import{readFileSync}from'node:fs'; import{join}from'node:path';
For a Vite or Next.js project, the cleaner path is to import the SVG as a component through your bundler's SVG loader. The above is the read-the-file version for projects that do not have a loader configured yet.
If you maintain an OSS app and need to migrate to the Google 2026 icons fast for a release this week, the path is: install the package, swap your existing Google icon imports for the 2026 variants, handle the Gmail edge case below, ship.
4. The Gmail multi-color edge case
One thing worth handling carefully in your render code. Gmail is the only app in the new Google 2026 set that keeps more than one color. The other twelve work fine with a currentColor fill or a single-color CSS override. Gmail breaks if you do that, because the multi-color fill is the brand.
If your design system applies a color prop to all logos uniformly, you need a special case for Gmail, or you ship two render paths:
This is the kind of edge case the old four-color rule used to hide. When every icon used four colors, you knew you could not apply a single-color override to any of them. Now twelve out of thirteen work fine with an override and one does not. Read your design system docs accordingly.
The bottom line
Google shipped new gradient icons for thirteen Workspace apps on May 18. The web rollout is live, the mobile rollout is in progress, and the new SVGs are already available as OSS at · building · follow on X @thegdsks
Brand refreshes are the moment your icon library reveals whether it is curated or just convenient.
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR