Browse icons

free SVG icons

Free SVG icons, copy in one click

Short answer

with icons gives you 500 free SVG icons in 20 styles (10,000 files in all), MIT licensed, with no sign-up and no credit required. Every icon is a clean viewBox="0 0 24 24" SVG that uses currentColor, so it takes the colour of the text around it. Click any icon below to copy its SVG code, or download the file.

Pick an icon, click to get it

A starter set for SVG icons. Search to find any of all 500.

Click an icon to copy it as SVG. The arrow opens its page.

Why SVG

Sharp at any size, tiny on disk

SVG is drawing instructions, not pixels, so an icon stays crisp from a 16 px button to a billboard. A Line icon here averages about 400 bytes. You can change its colour with CSS, in Figma, PowerPoint or Canva, and it never goes blurry.

Quick facts
PriceFree. No account, no paid tier, no watermark.
LicenceMIT: personal and commercial use, no credit required (licence in plain words).
Icons500 icons × 20 styles (10,000 in all), every style on the same 24 × 24 grid.
FileviewBox="0 0 24 24", width/height 24, currentColor. Line strokes are 1.75 wide with round caps.
FormatsSVG (copy or download), PNG at any size, an SVG sprite per style, and <i> tag classes.
home.svg (Line)
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 11 L12 3.5 L21.5 11"/><path d="M5 9.5 V19 A2 2 0 0 0 7 21 H17 A2 2 0 0 0 19 19 V9.5"/><path d="M9.5 21 V16 A1.5 1.5 0 0 1 11 14.5 H13 A1.5 1.5 0 0 1 14.5 16 V21" class="wm-a"/></svg>

That’s the whole file. Paste it straight into HTML, Figma or a code editor.

Use them

Three ways to use an SVG icon

  1. 1

    Paste it inline

    Copy the SVG and paste it into your HTML. It inherits the text colour, so color: tomato on the parent recolours it.

  2. 2

    Use it as an image

    Download the .svg file and use it like any picture: <img src="home.svg" alt="Home">, or drop it into PowerPoint, Word, Canva or Figma.

  3. 3

    Use a class instead

    One setup line, then <i class="with with-home"></i>. See icon classes.

FAQ

Questions people ask

Are these SVG icons really free for commercial use?

Yes. Every icon is MIT licensed: use it in client work, products, apps and print without paying or giving credit. Read the licence.

How do I change the colour of an SVG icon?

The SVGs use currentColor, so on a website they follow the CSS color of their parent. In this picker, choose a colour before you copy or download and it’s baked into the file.

What size are the SVG icons?

Each one is drawn on a 24 × 24 grid. Because they are vectors you can scale them to any size without losing quality.

Can I edit the SVG files?

Yes. Open them in Figma, Illustrator, Inkscape or a text editor and change anything you like.

Find your icon in seconds

500 free icons, 20 styles, no account. Copy, download or drag them into your work.

Browse all icons