AI Engineering FoundryLoading…
Loading…
Search about 26,000 free, open-licensed icons from Lucide, Tabler, Phosphor, Heroicons, and Material Design Icons. Recolor and resize one, then copy it as SVG or a React component, or download SVG or PNG.
Also covers: Free SVG icons · Icon search · SVG icon download · React icons
Pick an icon to change its colour, size and stroke, then copy or download it.
Icons from Lucide (ISC), Tabler, Phosphor and Heroicons (MIT), and Material Design Icons (Apache-2.0), all free for personal and commercial use under those open-source licenses. Search, recolouring and export run in your browser.
Choose Lucide, Tabler, Phosphor, Heroicons, Material Design Icons, or All sets, then type a word like arrow, user, or cloud. Old and alternative icon names match too.
Click an icon to set its colour and size. Outline icons also get a stroke-width slider, so a set drawn at 2px can match a 1.5px design.
Copy or download it as an SVG file, as a typed React component, or as a PNG at the size you picked.
Yes. Lucide is ISC-licensed, Tabler, Phosphor and Heroicons are MIT, and Material Design Icons is Apache-2.0. All of them allow personal and commercial use, including in paid apps and client work. Keep the set's license file with your project if you ship the icons in source code.
The SVG is coloured with currentColor instead of a fixed hex value, so it takes the text colour of whatever it sits in. That's usually what you want for icons in buttons, links, and dark-mode interfaces. PNG downloads can't inherit a colour, so they're drawn black in this mode.
It's a single .tsx file with the SVG attributes converted to camelCase. It accepts any SVG prop, and the props you pass override the defaults, so <IconArrowRight width={20} className="text-blue-500" /> works as expected.
Only outline icons are drawn with strokes. Filled icons, like Material Design Icons and most Phosphor weights, are solid shapes, so there's no stroke to change; use the Phosphor -thin, -light, or -bold variants instead.
No. The icon sets are served from this site and loaded into your browser when you pick them, and recolouring and PNG export happen on your device.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.