Free two-tone icons
152 two-tone icons where secondary details sit back at a lighter tone. 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 two-tone icons
Two-tone icons keep the main outline at full strength and draw secondary details, such as inner lines and accents, at a lighter tone. The eye reads the main shape first.
They use a single colour with opacity, so they adapt to light and dark themes without a second palette.
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="twotone" />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 two-tone and duotone?
- Two-tone dims secondary details to 60% opacity. Duotone keeps every line at full strength and adds a light fill inside the main shapes.
- 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 use two colours instead of opacity?
- Not yet. Two-tone uses one colour at two strengths, so it works in any theme without a second palette.