Colored SVG Icons

This collection covers icons that come pre-colored — flat multi-color, gradient, and playful 3D-style illustrations — pulled from multiple libraries into one searchable set, for when a single-tone icon feels too plain. Useful for marketing pages, onboarding flows, and empty states where an icon needs to carry more visual weight on its own, without relying on CSS to add color.

9 icon packs·Free & open source

Icon Packs

Fluent UI System Color Icons

890 iconsMIT
Add Circle 16
Add Circle 20
Add Circle 24
Add Circle 28
Add Circle 32
Add Starburst 16

IconPark

2,658 iconsApache 2.0
A Cane
Abdominal
Abnormal
Acceleration
Accept Email
Acoustic

Marketeq

590 iconsMIT
1st Place
2k
2nd Place
3rd Place
4k 2
Acorn

Streamline color

2,000 iconsCC BY 4.0
Add 1
Add 1 Flat
Add Bell Notification
Add Bell Notification Flat
Add Circle
Add Circle Flat

Flex color icons

1,000 iconsCC BY 4.0
3d Coordinate Axis
3d Coordinate Axis Flat
3d Rotate 1
3d Rotate 1 Flat
3d Rotate Y Axis
3d Rotate Y Axis Flat

Kameleon color icons

400 iconsCC BY 4.0
Aid Kit
Aid Kit Duo
Airconditioner
Airconditioner Duo
Airdrop Box
Airdrop Box Duo

Plump color icons

1,000 iconsCC BY 4.0
3d Coordinate Axis
3d Coordinate Axis Flat
Add Bell Notification
Add Bell Notification Flat
Add Layer 2
Add Layer 2 Flat

Stickies color icons

200 iconsCC BY 4.0
3d
3d Duo
Add Device
Add Device Duo
Airport Railroad
Airport Railroad Duo

Ultimate color icons

998 iconsCC BY 4.0
Ab Testing Monitors
Accounting Bill Stack 1
Accounting Calculator 1
Accounting Coins
Add Circle Bold
Adobe Logo

Common Use Cases

  • 1

    Marketing and landing pages using colorful icons to illustrate features or benefits

  • 2

    Onboarding flows and empty states that need visual warmth without a full custom illustration

  • 3

    Pricing pages showing colored icons next to plan features or included perks

  • 4

    Dashboards and app homepages using colored icons to visually distinguish categories or modules

  • 5

    Email newsletters and marketing campaigns needing eye-catching icons that don't rely on CSS

  • 6

    Presentation decks and pitch materials where icons need to stand out without extra styling

  • 7

    Mobile app illustrations for tutorial screens, permission prompts, or feature highlights

Frequently Asked Questions

Icons in this collection come with their colors already built into the SVG file — multiple fills, gradients, or shading — rather than a single path meant to be colored with CSS. That makes them ready to use as-is, but also means you have less control over recoloring them to match a specific brand palette.

It's more limited than with single-color icons. Since these use multiple fills or gradients defined directly in the SVG markup (not tied to 'currentColor'), overriding colors with CSS usually means editing the SVG's internal fill values directly rather than a simple color property.

Styles vary by library: some (like Streamline Color or Fluent UI System Color) lean flat and clean, while others (like Plump Color) use a rounded, slightly 3D look with soft shading. Check each library's pack page to compare styles before picking one for your project.

Likely yes, more so than with outline icon sets. Because color, shading style, and illustration weight vary noticeably between libraries here, it's best to pick one library for a given interface rather than combining icons from several.

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

Some do better than others — icons with lots of internal detail or subtle gradients can lose clarity at very small sizes. If you need icons below 24px, it's worth previewing a specific icon at that size before committing, since flatter, simpler styles tend to hold up better than more detailed ones.

Yes, since they're SVG (and can be exported to PNG/ICO if needed), though it's worth checking that the icon still reads clearly at very small favicon sizes, since favicons are often shown well under 32px.

More Collections

logos/google-icon
logos/airbnb-icon
bxl/amazon
token-branded/bitcoin

Brands & Logos

Brand and product logos in SVG

meteocons/extreme-night-drizzle-fill
wi/day-lightning
meteocons/wind-beaufort-12-fill
wi/sandstorm

Weather

SVG icons for every weather condition

gis/bbox-alt
tabler/map-pin-check
maki/airport
osmic/bicycle-14

Maps & Location

Markers and POI icons for maps

twemoji/pot-of-food
noto/kiwi-fruit
mdi/food-fork-drink
openmoji/pot-of-food

Food & Drink

Food and beverage icons

mdi/car-back
tabler/motorbike
carbon/bicycle
carbon/crossroads

Transport & Vehicle

Cars, transit, and travel icons

emojione/grinning-face
emojione-monotone/cat-face
noto-v1/grinning-squinting-face
openmoji/family

Emoji

SVG emojis, seven styles combined

tabler/garden-cart
lucide/credit-card
solar/shop-bold-duotone
hugeicons/shopping-bag-add

E-Commerce

Cart, checkout, and shipping icons

medical-icon/ambulance
healthicons/blood-drop-24px
covid/symptoms-fever
covid/covid-19-virus-4

Medical & Health

Health and medical icons

View all collections →