IO

Loading icon index…

ICON OOP

Icons & Logos
- icons
-

Free SVG icons and brand logos, in one browser tool

ICON OOP puts seven freely licensed icon collections behind a single search box: roughly 23,000 icons and brand logos you can recolour, resize and download as SVG or PNG, with no account, no watermark and no download limit.

Most icon sites make you pick a library first, then search inside it, then download a zip of five thousand files to get one icon. This one searches everything at once, lets you set the colour and stroke before you export, and gives you the file or the code, whichever you need.

Nothing is uploaded

Recolouring and PNG conversion run in your browser using canvas. No file you export ever leaves your device.

Free for commercial use

CC0, MIT, ISC and Apache 2.0 licences. Only the emoji require a credit line.

SVG, PNG or code

Download a file, or copy inline SVG markup, a React component or a CSS background rule.

No account, no limit

No sign-up, no email capture, no paid tier. The tool is kept ad-free on purpose.

What is in the library

Seven collections, each maintained as an open source project. They are not interchangeable: each was drawn to different rules for a different purpose, which is why the set you choose matters more than the icon you pick.

CollectionRoughlyWhat it is forLicence
Lucide1,700Clean outline UI icons, the safe defaultISC
Tabler5,000+Broad coverage, outline and filled pairsMIT
Phosphor1,500 x 6 weightsWeight as a design token, duotoneMIT
Material Symbols3,800Google's system, four variable axesApache 2.0
Brand logos4,800Company marks, monochrome and full colourCC0
Devicon570+Languages, frameworks, dev toolingMIT
Emoji1,700Open source emoji as SVG or PNGCC-BY 4.0

Full comparison, including what each set is bad at, is on the icon sets page.

How to use the tool

  1. Search or browse. Type what you need, or filter by collection. Search covers names and tags, so "bin" finds the trash icon.
  2. Set the colour. Pick a hex value, or leave it neutral if you plan to drive the colour from CSS with currentColor.
  3. Set the stroke or weight. Heavier for small icons, lighter for large ones. Browsers scale stroke proportionally, which is visually the wrong behaviour, so setting it deliberately matters.
  4. Choose the format. SVG for anything in a browser. PNG at 2x to 8x for slides, email and anywhere SVG is refused.
  5. Download, or copy the code. Inline SVG, React or CSS, ready to paste.

The one rule worth following Pick one interface icon set and stay inside it. Mixing sets is the most common reason an interface looks subtly unfinished, because libraries differ in stroke weight, corner radius and level of detail all at once. Brand logos and emoji are separate categories and mix freely with any set.

SVG or PNG?

For anything rendered in a browser, SVG. It scales to any size from one file, stays sharp on high-density displays, is usually under a kilobyte for a simple icon, and can be recoloured with CSS so hover, focus and dark mode states need no extra files.

Use PNG when the destination refuses SVG, which is a longer list than people expect: most email clients strip it, most social platform upload fields reject it, app store assets require PNG at fixed pixel sizes, and some platforms block SVG deliberately because it can contain script. When you do export PNG, export at two to three times your display size, because scaling a PNG up is destructive and cannot be undone.

Detail in SVG vs PNG and converting SVG to PNG.

Licensing, in one paragraph

Every collection here is free for commercial use, including inside paid products and client work. Six of the seven need no visible attribution: Lucide is ISC, Tabler, Phosphor and Devicon are MIT, Material Symbols is Apache 2.0, and the brand logo sets are CC0. The emoji are CC-BY 4.0 and do require a credit line, which is why one appears in the footer of every page on this site.

Brand logos raise a separate question that the file licence does not answer. Copyright governs whether you may copy the file; trademark governs whether you may display the mark in a given context. Using a logo to describe something true, an integration you support, a payment method you accept, a social profile you link to, is normal. Using it to imply endorsement is not. The licensing guide works through this properly.

Guides

We write up what we learn about using icons on the web. The guides cover the failure modes as well as the happy path, because the failure modes are usually what people searched for.

Everything is listed on the guides hub. If you spot an error in one, tell us and it gets fixed.