Free duotone icons
152 duotone icons with a soft tinted fill behind the outline. Free, MIT licensed, as SVG or as components for React, Vue and Svelte.
- home
- search
- user
- bell
- calendar
- heart
- lock
- trash
- message
- camera
- folder
- plus
- minus
- close
- check
- chevron-left
- chevron-right
- chevron-up
- chevron-down
- arrow-left
- arrow-right
- arrow-up
- arrow-down
- menu
- more
- filter
- download
- upload
- share
- link
- edit
- copy
- eye
- star
- bookmark
- image
- play
- pause
- smartphone
- map-pin
- globe
- clock
- cart
- credit-card
- info-circle
- alert-triangle
- check-circle
- sliders
- currency-aed
- settings
- log-out
- log-in
- refresh
- undo
- redo
- external-link
- grid
- list
- layers
- bar-chart
- trending-up
- pie-chart
- file
- file-text
- clipboard
- inbox
- send
- video
- mic
- volume
- volume-off
- music
- headphones
- wifi
- battery
- monitor
- laptop
- cloud
- sun
- moon
- zap
- gift
- tag
- wallet
- receipt
- shopping-bag
- package
- users
- user-plus
- shield
- key
- unlock
- eye-off
- flag
- sparkles
- bot
- compass
- x-circle
- help-circle
- code
- terminal
- git-branch
- git-commit
- git-merge
- database
- server
- cpu
- cloud-upload
- cloud-download
- banknote
- coins
- percent
- calculator
- currency-sar
- currency-eur
- landmark
- trending-down
- store
- truck
- barcode
- ticket
- gem
- crown
- activity
- heart-pulse
- pill
- thermometer
- plus-square
- at-sign
- hash
- paperclip
- mail-open
- calendar-check
- calendar-plus
- map
- navigation
- target
- maximize
- minimize
- zoom-in
- zoom-out
- arrow-up-down
- plus-circle
- minus-circle
- toggle-left
- bell-off
- mic-off
- video-off
- wifi-off
- cloud-off
- umbrella
About duotone icons
Duotone icons pair a full-strength outline with a light fill of the same colour inside the main shape. They add depth without a second colour, so they work in any theme.
Every duotone icon is generated from the same drawing as its stroke, solid and two-tone versions, so you can mix styles on one screen and they still line up.
Click any icon for its SVG code and downloads, or change styles live in the icon explorer.
Use them in code
npm i @uv-foundry/icons-react
import { HomeIcon } from '@uv-foundry/icons-react';
<HomeIcon variant="duotone" />The same props work in Vue and Svelte. AI coding tools can add these icons for you through the MCP server.
Questions
- What’s the difference between duotone and two-tone icons?
- Duotone adds a light fill (30% opacity) inside the main shapes. Two-tone keeps the outline but draws secondary details at 60% opacity. Both use one colour, which you set with color or CSS.
- Are they free for commercial use?
- Yes. Every icon in every style is MIT licensed: free for personal and commercial projects, with no attribution needed in your product.
- Can I change the duotone colour?
- Yes. Icons use currentColor by default, so they follow your text colour. Pass color="#2f45c4" or a CSS class to change it; the fill tint follows automatically.