Free outline icons
152 outline icons on a 24px grid with adjustable stroke width. 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 outline icons
Outline (line, or stroke) icons are drawn with a single consistent line. Set strokeWidth anywhere from 1 to 2, or leave it unset and the icons choose a weight for their size: 2.25 at 16px, 1.8 at 20px and 1.5 at 24px and above.
Every outline icon has matching solid, duotone and two-tone versions, generated from the same drawing.
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 />The same props work in Vue and Svelte. AI coding tools can add these icons for you through the MCP server.
Questions
- Can I change the line thickness?
- Yes. Pass strokeWidth={1} for a light look or strokeWidth={2} for bold. Without it, the weight adapts to the icon’s size so small icons stay crisp.
- 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.
- Is outline the default style?
- Yes. Outline (stroke) is the default variant, with rounded corners.