Filled outline icons
Filled outline icons
two-tone depth, still clean.
7 filled outline icons packs
9,791 icons
About filled outline icons
Filled outline icons,
done right.
- Branded product UI
- Dark-mode interfaces
- Feature highlights
- Modern dashboards
Filled-outline icons (also known as duotone or duo icons) combine a crisp outline with a second, lighter accent fill. The two tones give each icon subtle depth and a pop of brand colour without the visual noise of full-colour or 3D styles.
Every Roundicons duotone set keeps the outline and fill on separate layers, so you can set the stroke to your text colour and the fill to a tint of your brand — a two-second recolour that makes the whole set feel custom. The style works equally well in light and dark UI.
Delivered as SVG, multi-size PNG, layered AI source and an IconJar archive, with the two tones cleanly separated for easy theming.
Where filled outline icons work best
Built for the places people actually use them.
Branded SaaS UI
Set the fill to a tint of your brand colour and every icon quietly reinforces your identity.
Dark-mode dashboards
A light stroke over a soft tinted fill keeps icons legible and warm on a dark surface.
Feature highlights
The extra depth makes filled-outline icons strong focal points in a benefits section or card.
Two-tone design systems
Stroke and fill on separate layers let you theme both independently across light and dark themes.
What you get
Every format,
fully editable.
- Formats
- SVG · PNG (multiple sizes) · layered AI source · IconJar archive
- Grid
- Drawn on a consistent pixel-snapped grid so the whole family aligns
- Scaling
- True vectors — crisp from a 16px control to a billboard, with no quality loss
- Editing
- Recolour, restroke and export right in the browser, or in Figma, Illustrator & code
- Licensing
- Standard or Extended commercial license — or get every pack in the bundle
- Updates
- One year of free pack updates · 30-day money-back guarantee
Pairs well with
Line icons
Clean single-weight outline icons drawn on a strict pixel grid. The most versatile style for modern UI — light, legible, and consistent at any size.
Solid icons
Bold, filled glyph icons with maximum presence. The clearest read at small sizes — perfect for tab bars, status indicators and anywhere an icon must be unmistakable.
FAQ
Frequently asked questions
What is a filled-outline (duotone) icon?
It is an outline icon with a second, lighter accent fill layered behind the stroke. The two tones add depth and a hint of colour while keeping the icon clean and legible.
Can I set the accent colour myself?
Yes — the outline and fill are on separate layers in the SVG/AI source, so you can theme the stroke and the accent fill independently to match your brand.
Do filled-outline icons work in dark mode?
Very well. Because the two tones are independently editable, you can flip the stroke to a light colour and keep a tinted fill for a polished dark-mode look.
Are filled-outline and duotone the same thing?
Yes — "filled outline", "duotone" and "duo" all describe the same style: a crisp outer stroke plus a second, softer fill colour. We use the names interchangeably.
When should I choose filled-outline over plain line icons?
Reach for filled-outline when a plain line set feels too thin or flat and you want a touch of brand colour and depth — without committing to fully coloured or 3D icons. It is a popular middle ground for modern product UI.
The bundle
$1,358
for $1,358.
All 29 families. Every format. One payment, lifetime download access, 30-day money-back guarantee.