ICON OOP gives you 23,000+ icons and logos from seven freely licensed collections, downloadable as SVG or PNG with no account and no watermark. Everything runs in your browser, so no file you produce is ever sent to a server.
This page is about doing the download well: which set to pull from, what settings to fix before exporting rather than after, and what a good SVG file actually looks like when you open it.
The ninety-second version
Pick one icon set and stay in it. Set colour and stroke before exporting, not after. Prefer SVG over PNG unless the destination refuses SVG. Check the file has a viewBox and uses currentColor. Keep a note of which set you used, because in six months you will need a matching icon and will not remember.
Step one: choose a set, not an icon
The most common mistake is searching for each icon individually and taking whichever result looks best. Do that fifteen times and you have fifteen icons from five libraries, drawn on different grids at different stroke weights, and an interface that looks slightly wrong in a way nobody can articulate.
Decide the set first, then search within it.
| If you want | Start with |
|---|---|
| A tight, restrained interface set | Lucide |
| Maximum coverage, obscure concepts | Tabler |
| Weight as a design token, filled states | Phosphor |
| Google product feel, variable axes | Material Symbols |
| Company and product marks | Brand logos |
| Languages, frameworks, dev tools | Devicon |
The comparison in full is on the icon sets page. Brand logos and emoji are the two legitimate exceptions to the one-set rule, because they are identifying real things rather than labelling actions.
Step two: get the export settings right
Fixing these before export saves editing files afterwards, which is where most inconsistency creeps in.
- Colour. If you are inlining the SVG in HTML, leave it as
currentColorso CSS can drive it. If you are handing the file to someone who will place it in a design tool or a document, set the actual colour now, because they will not edit the XML. - Stroke width. Only relevant for stroke-based sets. Match it to your display size: heavier for small icons, lighter for large ones. Detail in icon sizes.
- Size. For SVG this barely matters, since it scales, but the width and height attributes set the default when something places it without CSS. Keeping them at 24 is a sane default.
- Format. SVG unless the destination cannot take it.
What a clean SVG file looks like
Open a downloaded icon in a text editor. It should look roughly like this:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>Four things make that file good, and their absence is what makes a downloaded icon annoying:
- It has a
viewBox. Without one, the SVG will not scale with CSS. This is the single most common cause of "my icon renders at the wrong size and nothing I do fixes it". - It uses
currentColor. The icon inherits colour from CSS, so hover, focus, disabled and dark mode all work for free. - There is no editor metadata. Files exported from Illustrator, Figma or Sketch often carry namespaces, generator comments, hidden layers and empty groups that can double the file size and occasionally break styling.
- There are no hard-coded IDs that will collide. Gradients and clip paths use IDs, and two files using the same ID on one page will fight. Mostly an issue with multi-colour icons.
If a file you got from somewhere else has none of these properties, the SVG optimisation guide covers cleaning it up.
SVG, PNG, React or CSS
| Export | Use it when |
|---|---|
| SVG file | Web, design tools, anything that will be resized |
| Inline SVG markup | You want CSS control and no extra request. Best for under about 20 icons per page |
| PNG | Slides, email, older tools, anywhere SVG is rejected. See SVG to PNG |
| React component | You are building components and want props rather than markup |
| CSS background | Decorative icons that never need to change colour dynamically |
The CSS option is worth a caveat. A data-URI SVG in a stylesheet is convenient and cannot be recoloured with currentColor, because it is a separate document. If the icon needs to change colour on hover you will end up encoding two copies. Inline it instead.
The five-point check before you ship
- Render it at your real size. Not at 200px in a preview. An icon that reads clearly at 48px can be unrecognisable at 16px.
- Put it next to its neighbours. Consistency problems are invisible in isolation and obvious in a row.
- Check both themes. If you support dark mode, look at it there too. This catches hard-coded blacks immediately.
- Give it an accessible name, or hide it. An icon-only button needs a label; a decorative icon needs
aria-hidden="true". See accessible icons. - Note the source. Which set, which licence. Ten seconds now, versus an afternoon of archaeology later.
Downloading a set rather than an icon
If you need thirty or more icons for a product, downloading them one at a time is the wrong shape of work. Two better routes.
Install the package. Every major set has npm packages with tree shaking, so you import icons by name and only ship what you use. Fastest for an app with a build step.
Or build a sprite. Export the icons you need once, combine them into a single sprite sheet, and reference each with <use>. One request, cached, and your icon inventory becomes a single reviewable file. This is the better answer for a static site or when you want the icons under your own version control. Full walkthrough in SVG sprites.
Licensing, quickly
Everything in the tool is free for commercial use. The licences are CC0, MIT, ISC and Apache 2.0 for the icon libraries, none of which need visible attribution. Emoji are CC-BY 4.0 and do require a credit line, which is the one exception to remember.
Brand logos are a separate question, because the file licence and trademark law are different things. Short version: using a logo to describe something true, an integration, a payment method, a social link, is normal. Using it to imply endorsement is not. Full detail in icon licensing.