Frequently Asked Questions

Yes, completely free, and there's no signup.Every feature and download is unlimited: no watermark, no download cap, no paid tier.

No.Open the site and everything works right away.Favorites, recent icons, and color palettes are saved in your browser automatically, so they're still there the next time you visit from the same browser.

Icony has no accounts and never asks for your name or email.Favorites, recent icons, and color palettes stay in your browser's local storage and aren't sent to Icony's servers; clearing your browser data deletes them.The site does use Google Analytics and Google AdSense, which set cookies and collect usage data such as the pages you visit, plus cookieless Cloudflare Web Analytics.The Privacy Policy has the details and opt-out links.

Icony is a side project built and run by one person.The icons are open source, so they cost nothing to include.Ads on the site and sponsors on Buy Me a Coffee and GitHub Sponsors cover the running costs, and there are no plans to charge users.

You need a connection the first time the icon libraries load.Once the page is open, recoloring, resizing, and exporting all happen in your browser.Nothing is uploaded to a server, and conversion runs locally.

Six open-source libraries in eight icon sets, since Phosphor and Heroicons each come in an outline and a filled style: Lucide Icons (1,539), Tabler Icons (5,986), Phosphor Icons (1,512), Phosphor Fill (1,512), Heroicons (175), Heroicons Solid (175), Bootstrap Icons (317), and Radix Icons (207).That's 11,423 icons in total.The /icon-libraries page covers what each one is good for and how to install it.

Yes.Every library in Icony is released under the MIT or ISC license, and both allow personal and commercial use.Attribution is not legally required, though it is appreciated.If you plan to resell the icons as-is or redistribute them as an icon pack, read the original license terms first.

Yes.The library filter at the top of the app shows icons from one library only, such as Lucide, Tabler, or Phosphor.While a filter is on, search only looks inside that library.

Search also checks synonyms, so you don't need the exact icon name: "bin" will turn up trash.Korean queries are mapped to their English equivalents automatically.If the icon still doesn't appear, check whether a library filter is on and search across all libraries instead.Libraries often name the same thing differently (trash / trash-2 / bin).

Tabler has the most icons (5,986).Lucide is a clean outline set that holds up well when you change the stroke width.If you use Tailwind CSS, Heroicons comes from the same team, and shadcn/ui now uses Lucide by default (older shadcn/ui setups used Radix Icons).Stick to one library per interface; the result looks far more consistent.

PNG and SVG.PNG is a bitmap format that works for web, apps, and presentations.SVG is a vector format, so it stays crisp at any size and can go straight into your code.

Type any value from 16px to 512px into the size field, or use the 32, 64, 128, and 256px presets.The default is 128px.UI icons are usually 16, 20, or 24px; app icons and thumbnails use the larger sizes.

Yes, for four libraries: Lucide, Tabler, Phosphor, and Heroicons.It has no effect on Bootstrap Icons, Radix Icons, or the filled variants (Phosphor Fill, Heroicons Solid).Set any value from 0.5 to 4 with the slider or input, or pick one of the 1, 1.5, 2, 2.5, and 3 presets.Phosphor has no adjustable stroke, so the value switches it between its thin, light, regular, and bold weights.The default is 2, and since very thin strokes look washed out at small sizes, 1.5–2 is a safe range.

Yes.With an icon selected, "Copy SVG" copies the SVG markup and "Copy JSX" copies it as a React component.The separate "Copy to Clipboard" button copies a PNG image, not code.Use that one when you paste into a document or chat.

Yes.The "Share" button copies a link that carries the selected icon plus your color and size settings.Opening it starts the editor with the same configuration, which is handy when you want to send a teammate a specific setup.

Yes.Select several icons and download them together as a ZIP.Your color, size, and stroke width apply to every icon in the batch, so the set comes out consistent.

Yes, always.There is nothing to configure.If the icon will sit on a dark background, pick a light icon color before you export.

SVG, in most cases.It stays sharp at any size and the files are smaller.Use PNG where SVG isn't supported, such as older email clients or some document tools.

Export it larger than the size you display it at.A 24px PNG shown at 24px looks soft on high-density screens.Export at 2× (48px) or 3× (72px), or use SVG, which is sharp at every scale.

Outline icons take their color on the stroke; solid and fill icons take it on the fill.If the preview doesn't change, you may have picked an icon from the other style.If a pasted SVG won't recolor, check whether its fill or stroke is hardcoded to a specific color instead of currentColor.

Usually the dimensions are missing.If the SVG has no width or height and its parent has zero size, nothing renders.Also check that the viewBox attribute is still there and that the icon color differs from the background.A white icon on a white page happens more often than you'd think.

Use the Favicon Generator (/favicon-generator).It builds a favicon.ico with 16, 32, and 48px images, an SVG favicon, a 180px Apple touch icon, and the PNGs a web app manifest needs.Don't ship only an SVG: Google's favicon guidelines don't list SVG as a supported format, and Safari supports them only from version 26, so keep the ICO.Favicons render very small, so icons with little detail and thick strokes hold up best.

Yes.You can download customized icons from Icony, or install the libraries yourself via npm.The /icon-libraries page has installation instructions and usage examples for each one.If you only need a handful of icons, copying the SVG into a component keeps your bundle smaller.

You don't need to convert it by hand.The "Copy JSX" button gives you the icon as a React component, with attributes already in camelCase (stroke-width becomes strokeWidth, fill-rule becomes fillRule).If you edit it further, set fill or stroke to currentColor.The icon then follows the CSS color property, so you can drive the color from props.The guide on using an SVG icon as a React component walks through a full example.

All modern browsers, including Chrome, Firefox, Safari, and Edge.The EyeDropper (screen color picker) only works in Chrome, Edge, and Opera.