Gradient SVG Icons

Where duotone uses two flat shades and flat-color icons use solid fills, gradient icons blend smoothly between colors within a single shape — giving them a softer, more dimensional look. This collection pulls gradient and gradient-adjacent icons from Fluent UI System Color Icons, Flat Color Icons, Plump Color Icons, Ultimate Color Icons, Streamline Color, and other sources, for interfaces that want icons with more visual richness than a flat single- or multi-color set.

5 icon packs·Free & open source

Icon Packs

Common Use Cases

1
Marketing and landing pages wanting vibrant, eye-catching feature icons
2
App store screenshots and promotional graphics needing polished, colorful icons
3
Onboarding flows and welcome screens using gradient icons for a modern feel
4
Pricing pages highlighting plan features with visually rich icons
5
Presentation decks and pitch materials wanting icons that stand out on slides
6
Dashboard widgets or cards using gradient icons to add visual hierarchy
7
Social media graphics and banners incorporating colorful icon elements

Frequently Asked Questions

The libraries do overlap, since Fluent UI System Color Icons, Plump Color Icons, Ultimate Color Icons, and Streamline Color also appear in the Colored collection. This collection narrows the selection to icons that specifically use gradient or smooth color-blend fills, rather than the broader flat and multi-color styles covered in Colored. If you want the full range of colored styles, including flat multi-color, check the Colored collection instead.

This is more involved than recoloring a single-color icon, since gradients are typically defined with multiple color stops directly in the SVG markup. You'd generally need to edit the SVG's gradient definition (the 'stop-color' values) rather than applying a simple CSS color override, unless the specific icon was built with CSS custom properties for this purpose.

Not always — gradients and fine color transitions can lose their effect or look muddy at very small sizes, especially on detailed icons. Gradient icons tend to work best at medium-to-large sizes (32px and up), such as feature sections or app icons, rather than compact interface elements.

Each icon keeps the license from its source library attached to it, and terms can differ between Fluent UI System Color Icons, Flat Color Icons, Plump Color Icons, Ultimate Color Icons, Streamline Color, and other included libraries. Check the license shown on the individual icon or pack page before using it commercially.

It's best to avoid this, since gradient direction, color palette, and overall style vary noticeably between libraries. Mixing icons from several gradient libraries on one page or section can look visually inconsistent — pick one library and stay consistent within a given interface or layout.

Gradients generally reproduce fine in print since SVG is vector-based, but results can vary depending on your print process (some color printers handle smooth gradients better than others). If print accuracy matters, it's worth testing a sample icon with your specific printer or print vendor first.

A few of the included libraries, like Flat Color Icons, offer a flatter alternative, and some icon shapes may also exist in the Colored or Outline & Line Art collections in a non-gradient style. Check whether the specific icon you need has a flat equivalent in those collections.

Gradient SVG Icons

Icon Packs

Flat Color Icons

Fluent UI System Color Icons

Streamline color

Plump color icons

Ultimate color icons

Common Use Cases

Frequently Asked Questions

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health

Gradient SVG Icons

Icon Packs

Flat Color Icons

Fluent UI System Color Icons

Streamline color

Plump color icons

Ultimate color icons

Common Use Cases

Frequently Asked Questions

How is this different from the Colored collection — some libraries overlap?

Can I change the gradient colors to match my brand palette?

Do gradient icons work well at small sizes, like favicons or 16px UI icons?

Are these icons free to use in commercial marketing materials or products?

Should I mix gradient icons from different libraries on the same page?

Do these icons print well, or are they meant for screens only?

What if I want the same icon shape but in a flat color instead of a gradient?

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health