Bookmarks for Devs

Frontend

Free SVG Icon and Logo Resources for Developers

Where to find free SVG icons and brand logos you can actually ship: open icon sets, a logo library, the license rules that bite, and the cleanup steps.

September 5, 20267 min read#frontend#icons#svg#design

This is for the developer who needs an icon or a brand logo in the next ten minutes, wants a real SVG rather than an icon font, and would rather not discover six months later that the file was never free to use. Four sources, the license rules that actually bite, and the three steps between a downloaded file and something you can commit.

Open icon sets you can drop into a component

Lucide

Lucide is an open-source icon set with first-class React, Vue, and Svelte packages, so you install once and import icons by name instead of managing files. It is good at breadth with a consistent stroke weight — a large set of glyphs that look like they were drawn by the same hand, which is the thing that falls apart when you assemble a set from five sources. It is not a brand-logo library, and it has nothing illustrative or animated in it. It is on the list because it is the boring correct default for UI iconography, and because "import it by name" beats "find the file again" every time. See Lucide in the catalog.

SVG Spinners

SVG Spinners is a collection of 60-plus loading spinners shipped as single SVG files, animated in pure CSS. You copy the markup straight into your component or pull them through Iconify — either way there is no animation library and no runtime dependency involved. It is not a general icon set: it does one category and stops. It earns its place because loading states are the one thing nearly every large icon set skips, and hand-rolling a spinner in CSS is an hour you will not get back. See SVG Spinners in the catalog.

Meteocons

Meteocons is a set of 200-plus animated weather icons in both SVG and Lottie, drawn in a fill style and a line style. If you are building anything that shows a forecast, this is the set — the animation is part of the design rather than bolted on, and the two styles mean it survives contact with a dark theme. Outside weather it is useless to you. It is here because the category is badly served and this set is free for any use. See Meteocons in the catalog.

Brand logos are a different problem

SVGL

SVGL is an open-source library of 500-plus brand and product logos as clean SVGs, copy-ready as raw markup or as React and Vue components. It is the fast answer to the "logos wall" — the integrations strip on a landing page, a footer row of payment providers, an About page listing your stack. What it is not is permission. The library being open source tells you about the library, not about the marks inside it. It is on the list because the alternative is screenshotting a logo off a press page and shipping a blurry PNG. See SVGL in the catalog.

Check the license before you ship

The failure mode here is not getting sued. It is a legal review three weeks before launch that quietly deletes a component. Five rules cover almost everything:

  • Read the LICENSE file, not the landing page. "Free" on a marketing site can mean free for personal use, free with attribution, or genuinely free. The repository tells you which.
  • Permissive licenses still have a condition. MIT and its neighbors require the copyright notice to travel with the work. Keeping the package in your dependency manifest usually handles this; copy-pasting a single file into your repo usually does not.
  • Creative Commons attribution is visible attribution. A CC BY set wants a credit a human can find, which is a design decision, not a footnote you can defer.
  • Trademark is not copyright. A logo file can sit in an MIT-licensed repository and the mark it draws still belongs to someone else. The license lets you copy the file. It does not let you use the brand.
  • Never use another company's logo as your own. Not as your favicon, not as your app icon, not anywhere that implies a partnership you do not have. Showing a logo to say "we integrate with this" is normal. Showing it to say "this is us" is not.

Optimize before it enters the repo

An SVG exported from a design tool carries editor metadata, unused defs, and coordinates at fourteen decimal places. SVGOMG is the web front end for SVGO: drop the file in, toggle individual optimizations, and watch the byte count fall with the preview right beside it so you can see the moment a setting breaks the shape. It is one file at a time in a browser tab, so it is not your build pipeline — for that you want SVGO itself. It is the right tool for the ten icons you are about to paste into a component. See SVGOMG in the catalog.

Turn the SVG into a React component

React will not take raw SVG. Attributes like stroke-width have to be camelCased, class becomes className, and an inline style string has to become an object or React throws at runtime. The SVG to JSX converter does the whole file in one paste and tells you what it changed, with options for currentColor, a size prop, and TypeScript output. The subtle bug it avoids: data- and aria- attributes must not be camelCased, which is exactly the mistake a careful person makes doing it by hand.

Favicons, and the raster fallbacks you still need

An SVG mark is not a favicon set. The favicon generator takes a PNG or SVG — or just a couple of letters — and produces the set browsers actually ask for in 2026: 16, 32, 48, 180, 192, and 512 pixel PNGs, a real multi-size favicon.ico, a web app manifest, and the <head> tags to reference them. When you need a raster version of an asset for somewhere that will not take vector — an email, an app store listing, an OG card — the image converter handles WebP, AVIF, JPEG, and PNG with a resize and a visible byte saving per file. Both run entirely in your browser; nothing is uploaded.

Keeping what you download findable

The real cost of free assets is re-downloading the same file for the third time because nobody can remember where it went. Eagle is a paid desktop library for exactly this — bulk-import images, fonts, and screenshots, then tag and filter until things are findable again. It is a personal-library tool, not a team asset system, and it costs money, so it is only worth it if you are drowning. See Eagle in the catalog.

The three icon sets above are rendered as live previews on the icons page. Everything else visual — fonts, color tools, galleries — sits under design in the catalog, and the browser utilities used in this post live in the toolbox.

FAQ

Are free SVG icon sets really free for commercial use?

Usually, but the license is the only thing that says so. Permissive licenses like MIT let you use icons in a commercial product as long as the copyright notice travels with the code. Sets marketed as "free" without a named license, or with a "personal use only" line, are the ones to skip.

Can I put a company's logo on my landing page?

Showing a logo to describe a factual relationship — an integration, a supported platform, a customer with permission — is normal practice. Using it as your own mark, your icon, or in a way that implies endorsement is not, and no icon library's license changes that. When a brand publishes usage guidelines, follow those over anything else.

Should I use an icon font or SVG icons?

Use SVG. Icon fonts ship glyphs you never use, render as boxes when the font fails, and are read as text by screen readers unless you work around it. Inline SVG is styled with CSS, colored with currentColor, and tree-shaken to only what you import.

Do I still need to optimize icons that are only a few kilobytes?

Yes, and not mainly for size. Design-tool exports carry ids, editor metadata, and hardcoded fills that fight your CSS — the reason your icon will not change color is usually a fill attribute the export left behind. Running it through SVGOMG strips that before it becomes a bug.