Every icon job used to be a three-tool shuffle. You found the glyph on an icon gallery, downloaded an SVG, opened it in a vector editor to recolor it, then ran it through a converter — or a command line — to get PNGs at each size and an ICO for the favicon. None of the three steps was difficult; together they were death by a thousand tabs, and somewhere in the shuffle the license question usually went unanswered.
The free icon editor at Practical Web Tools collapses the shuffle into one page. It searches more than 100,000 open-source icons live — the Iconify collections, which aggregate permissively-licensed sets such as Material, Tabler, and Lucide — and lets you recolor, resize, and adjust stroke width while you browse, then bulk-export SVG, PNG, and ICO without leaving the tab.
Try Icon Explorer & Editor — free, no sign-up.
This guide covers the whole workflow: searching well, keeping a set visually consistent, recoloring for real contrast, exporting the right formats at the right sizes, and staying clean on licensing — plus the favicon details most people get wrong the first time.
The old three-tool shuffle, and why it broke
The traditional pipeline had three stages, each with its own site. Find: an icon search engine or a set's homepage, scrolling thumbnails until something matched. Edit: a vector editor or a find-and-replace on the SVG source to change currentColor or a hardcoded hex. Convert: an online SVG-to-PNG converter or a locally installed CLI to rasterize each size and bundle the favicon.
The friction was not any single step — it was the seams. Every hop between tools was a download, an upload, a renamed file, and a chance to lose track of which icon came from which set under which license. Consistency suffered most: an icon picked in a hurry from a second set, at the wrong stroke weight, quietly cheapens an otherwise careful interface.
Merging the stages fixes the seams. Search, recolor, resize, stroke-width adjustment, and export happen in one place, on the live preview, so the icon you evaluate is the icon you export.
Searching 100,000 icons without drowning
Live search across the full Iconify index means the result set spans every major open-source collection at once. A few habits make it productive:
- Search by noun, not by concept. "settings" beats "preferences"; "shopping-cart" beats "checkout". Icon sets name things, and thing-names match.
- Try two or three synonyms before settling. The same function is "settings" in one set, "cog" or "adjustments" in another. The first page of results is not the whole inventory.
- Compare the same concept across sets. Because the index mixes collections, you can line up Material, Tabler, and Lucide side by side for "home" and pick the one that matches your typeface's temperament.
- Judge at target size. An icon that reads at 128px can vanish at 16px. Check the candidates small before committing.
Treat the search box as a palette rather than a vending machine: the goal is a coherent dozen, not a lucky one.
Stroke sets versus filled sets
Open-source icon sets come in two broad families, and the difference matters more than most people expect.
Stroke sets — Tabler and Lucide are the best known — draw outlines: a gear is a circle with teeth suggested by open strokes. They read as light and modern, and they scale gracefully because the stroke is defined as a width you can adjust. The icon editor exposes that stroke width live, so one set can serve dense tables (thinner strokes) and marketing pages (heavier strokes).
Filled sets — Material's classic glyphs, for example — draw solid shapes. They carry more visual weight, stay legible at 16px where fine strokes smother, and suit dense UIs and mobile targets.
The rule that actually matters: pick one family per interface and stay in it. A stroke gear next to a filled heart next to a stroke trash can looks assembled, not designed — the eye catches the mismatch before the brain names it. Mixing families within the same function (a filled bookmark in the header, a stroked one in the list) reads as a bug. Choose per project, not per icon.
Recoloring to hit contrast
Icons are interface, not decoration — an icon that signals "click here to pay" has to be seen. When you recolor an icon in the editor, you are making an accessibility decision, not just a brand one:
- Check the pairing, not the chip. A brand blue that passes on white may fail on the tinted surface where the icon actually sits. Evaluate the hex against its real background.
- Aim for at least 3:1 contrast for icons that carry meaning. Common accessibility guidance treats meaningful graphics the way it treats large text; icons next to labels can lean on the label, icons standing alone cannot.
- Test both themes. If your product has a dark mode, recolor and check against the dark surface too — one hex rarely passes on both, which is why sets ship currentColor and why recoloring per surface matters.
- Do not rely on color alone. Two icons that differ only by red-versus-green are indistinguishable to a meaningful share of users; keep a shape or stroke difference as well.
The live recolor makes this a two-second loop: change the hex, look at the result on a representative background, move on.
SVG, PNG, ICO: what each export is for
The bulk export produces all three formats; each has a job.
| Format | What it is | Use it for |
|---|---|---|
| SVG | Vector source | The master file — crisp at any size, editable forever, ideal in HTML and CSS |
| PNG | Raster at exact sizes | Specific slots: a 24px button glyph, a 48px settings icon, app assets |
| ICO | Multi-size container | Windows favicons — one file bundling several sizes |
Keep the SVG as the source of truth even when the deliverable is PNG or ICO. Rasterizing is a one-way door; the vector lets you re-export a new size next quarter without a search-and-rescue mission through old assets.
The favicon detail: 16, 32, 48
For a website favicon, the ICO you want bundles three sizes — 16, 32, and 48 pixels. Sixteen is what the browser tab actually shows on most displays; thirty-two covers larger tab strips, taskbar pins, and bookmarks; forty-eight serves desktop shortcuts and places where Windows renders the icon big. Exporting the three together in one ICO means one <link rel="icon" href="/favicon.ico"> line and every context is covered.
Modern browsers happily use PNG and SVG favicons too, but the ICO triple remains the compatibility default — it works everywhere, including older tooling that only looks for favicon.ico at the site root. Export it in the same batch as your UI PNGs; the icon editor produces all formats in one pass.
License hygiene, in one minute
Open-source does not mean license-free. The Iconify index aggregates permissively-licensed sets — Material, Tabler, Lucide, and the rest — but "permissive" covers a family of licenses whose requirements differ, particularly around attribution.
The tool makes this easy to respect: every icon carries a per-icon license link. The one-minute habit: before you ship, click the license link on each set you actually used, note what it asks, and keep a one-line credit in your project — something like Icons: Tabler (MIT), adjusted to whatever the link says. Commercial use is fine under essentially all of these sets; silent assumption is the only real mistake available.
A favicon workflow, start to finish
- Find the mark. Search a noun that matches your brand or product — "leaf", "bolt", "wave" — and shortlist three candidates across sets.
- Pick one family. Stroke for light interfaces, filled for heavy ones; commit for the whole project.
- Recolor to your hex. Check the color at 16px against a light and a dark surface.
- Adjust stroke width if needed. At favicon sizes, slightly heavier strokes survive; at 48px, thinner looks refined.
- Bulk-export. ICO with 16/32/48 for the favicon, PNG at every size your UI references, SVG as the master files.
- Wire it up. Drop
favicon.icoat the site root or point<link rel="icon">at it, and reference the PNGs where the design calls for them.
If the mark you need does not exist in any collection, draw it from scratch in the free online vector editor and export SVG from there — the two workflows meet at the same file format.
What comparable icon tools charge
Marketplace-style icon tools of the "buddy" class — sites that wrap open icon sets in a paid editor — gate bulk export behind freemium tiers as of late 2026. You can browse their catalogs, but leaving with a folder of converted files is what the subscription is for.
The economics are worth being blunt about: the underlying icons are open-source, the conversion is a few lines of standard rendering, and the recoloring is a fill swap. A browser tab does all three without an account, and the per-icon license link keeps you cleaner than the marketplaces that omit it. Pay for an icon tool when it draws original icons; do not pay to re-export Material.
Frequently Asked Questions
Can I use these icons in commercial projects? Generally yes — the sets are permissively licensed open source. But licenses differ in attribution requirements, so click the per-icon license link for each set you use and keep a short credit in your project.
Which ICO sizes does a favicon need? 16, 32, and 48 pixels in one file: 16 for the browser tab, 32 for taskbars and larger tab strips, 48 for desktop shortcuts. Export the three bundled together.
Can I convert an SVG to PNG without another tool? Yes — resize to the exact pixel size you need and export PNG in the same tool, in the same batch as the ICO and SVG files.
Does the search work offline? No. Live search talks to the Iconify API, so finding icons needs a connection. The files you export are ordinary SVG, PNG, and ICO assets that work anywhere once downloaded.
How do I keep twenty icons looking like one family? One set, one family (stroke or filled, never both for the same function), one stroke width, one corner treatment, and one color role per surface. Consistency is a constraint, and the constraint is the style.
What is the difference between ICO and PNG for favicons? PNG works in modern browsers and lets you ship one crisp size; ICO bundles several sizes in one file and remains the default every browser and tool falls back to. Export both if you want the modern and the compatible path covered.
