Iconify: Library of Open Source Icons

https://icon-sets.iconify.design/

by sea-gold • 6 months ago

575 60 6 months ago

icon-sets.iconify.design

sea-gold• 6 months ago

Previous discussions:

September 2024 (4 comments, 17 points): https://news.ycombinator.com/item?id=41615563

FireInsight• 6 months ago

https://icones.js.org/ is a good site to search through these IMO

vjay15• 6 months ago

Really useful thank you!

ulrischa• 6 months ago

Question to all HN Users: what is the best icon library?

pixelready• 6 months ago

Honestly, I always default to material icons unless a project calls for a very specific style. The coverage is just so dang good I rarely find a scenario without an appropriate icon and the style is neutral enough to blend in with a number of UI designs.

Bewelge• 6 months ago

I really like https://phosphoricons.com/

But other than that, I also usually default to Material UI Icons.

coolewurst2• 6 months ago

I like Material Symbols best. Largest selection AFAIK and simple enough that you can create unique ones that fit in.

Alupis• 6 months ago

My only issue with Material-anything is it immediately looks/feels to me like something Google-related.

Not a deal-breaker entirely, but for my own things I like differentiate.

tezza• 6 months ago

I’ve used FlatIcon extensively. My use case is video games rather than web design.

https://www.flaticon.com/

jojomodding• 6 months ago

Sadly not open source licensed

thecopy• 6 months ago

https://lucide.dev/

egeozcan• 6 months ago

I learned about this thanks to claude always using it.

deaux3• 6 months ago

These now instantly ring everyone's slop alarm bells. I'd choose any set over them.

mbsa72• 6 months ago

https://www.svgrepo.com I find the site very user friendly as it lets you customize the stroke's width, color etc, see how it looks like and copy the modified version.

Frotag• 6 months ago

This site shows up on google a lot but it's a bit sketchy that there isn't a link to the source / license text. Not to mention the SEO heavy descriptions.

Free Download Wallet 460 SVG vector file in monocolor and multicolor type for Sketch and Figma from Wallet 460 Vectors svg vector

Plus I've found the license listed isn't always accurate. For example the emojione icons are listed as MIT. But the actual repo says CC 4.0, with the non-artwork being MIT.

https://www.svgrepo.com/svg/404123/skull-and-crossbones

https://github.com/joypixels/emojione/

croisillon• 6 months ago

famfamfam of course, the only set one will ever need

swhitf• 6 months ago

The GOAT. I remember when basically every page on the internet had one of these icons on.

ComputerGuru• 6 months ago

You’ll get a lot of responses but for me (excuse the nostalgia), icon design peaked with famfamfam’s (aka Mark James’s) Silk iconset from ~2005. It was a shame they were never available at higher resolutions (or as SVG), though I’m betting AI (either as Adobe Illustrator or Artificial Intelligence) can probably rectify that these days (and generate subpar additional icons to expand the set).

View: https://peacocksoftware.com/silk

Download: https://github.com/markjames/famfamfam-silk-icons/tree/maste...

qingcharles• 6 months ago

I've used Tabler for everything so far (free, 4500 icons)

https://tabler.io/icons

RestartKernel• 6 months ago

This makes me want to write a post about the rabbit hole that is icon optimisation. It drives me insane when websites suffer from layout shift simply because they are not inlining their icons, for one.

jetin• 6 months ago

I agree with your comment, it is often an overlooked topic. Inlining icons can be one answer but be aware of the growing size of your DOM. Depending on the complexity, number and repetition of the icons you are using, an approach including lazy loading can be better. Layout shift is first and foremost caused by an improper space reservation.

8organicbits• 6 months ago

I believe setting width/height is a good fix here, although I see aspect ratio suggested as well. Inlining icons would prevent caching.

https://web.dev/articles/optimize-cls#history_of_width_and_h...

mythz• 6 months ago

iconify has been my primary source of icons for over a year now.

Most of my Websites/Apps don't use rasterized graphics for design anymore, SVG + CSS gradients/backgrounds & effects seem to handle everything I need.

hirako20005• 6 months ago

To point out some of these SVGs are nicely animated and can be searched for.

I used them for my offline text editor, the result turned wonderful (icons wise)

https://wrifocus.bounded.cc

albert_e2• 6 months ago

Thanks for sharing -- looks very useful to me.

Can you share any other details about your project -- if it can be self hosted, etc.

hirako20005• 6 months ago

I was hoping to open source it. Once I get to add some missing features and fix a few glitches.

The purpose of self hosting isn't that useful as it's totally offline, everything goes to local storage and indexdb. It stays on the browser.

But happy to share the repo if you would like to make it your own.

echoangle• 6 months ago

Which icon set is that? When I filter for „contains animations“, I only get 3 icon sets where 2 are loaders and one is weather icons.

hirako20005• 6 months ago

line-md is the one. Plenty more than 3 animated.

For size consistency, better stick to the same pack or you are on for SVG editing

catoc2• 6 months ago

The settings icon ‘sprouting’ cogs is really nice!

The editor also looks really nice. Could this not be used online as well? Persistence on the server instead of browser cache? (Curious what your use case is for an offline browser based editor?)

hirako20005• 6 months ago

The use case is privacy. Data getting harvested by free and even paid for services isn't pleasant (targeted ads, data breach etc)

If I get to add some "server" capability it will rather be webrtc, basically P2P to sync between devices, or a config to plug our own store. E.g GitHub, Google drive, dropbox or a self hosted service to SCP the files.

It isn't just browser cached, one can export individual documents or the entire store as a zipped folder. And back that up.

DenisDolya• 6 months ago

Thank you for sharing, this will come in handy for me.

aziis98• 6 months ago

This simply solved icons for me

nawaz0x1• 6 months ago

Nice work

primaprashant• 6 months ago

They also have an API which you can use to get the icon SVG.

I love making (architecture) diagrams in D2 [1], and love using the vast library of icons from Iconify in my diagrams where it makes sense. A sample diagram with SVG from Iconfiy would look like this:

  docker: Docker {
    icon: https://api.iconify.design/logos/docker-icon.svg
  }

  kubernetes: Kubernetes {
    icon: https://api.iconify.design/logos/kubernetes.svg
  }

  docker -> kubernetes: deploy

[1]: https://d2lang.com/

warrentr• 6 months ago

Thanks for the d2 rec; this looks really good and is written in Go!

davidcann• 6 months ago

My site can extend a bunch of the icon sets that are on Iconify with AI image models, so you can feel comfortable using a more unique set than just the big ones: https://universymbols.com

stared• 6 months ago

Nice!

One features that would be really nice would be to pick and icon (or a few) and compare these against all these icon sets.

So the process is "I want to have save icon matches the best my design" and go from there.

BaudouinVH• 6 months ago

I would have placed the search box on the left above "Filter icons set" #my2cents

EGreg• 6 months ago

Are these correlated, by css class name, or like a font? So we could switch a “theme”?

joshuaisaact• 6 months ago

This is a brilliant library, thanks so much for sharing it

t_mahmood• 6 months ago

https://www.svgrepo.com/ is another one that I have found very useful.

aeontech• 6 months ago

Since people are posting links to alternatives, another awesome source is the noun project. Has a mix of royalty-free, Creative Commons CC-BY-3.0, and paid license icons.

https://thenounproject.com/

pdntspa2• 6 months ago

Noun project is great but you have to manually remove a bunch of junk from their SVGs to make them usable unless you pay. It's kind of BS

pdntspa2• 6 months ago

Great! But where is the "download all" button.

Folders on my hard drive > anything hosted on the web

quintu5• 6 months ago

It’s all available in their GitHub repo.

lasgawe• 6 months ago

Love this. I use their Figma plugin almost every day.

paradox460• 6 months ago

Pictogrammers have one small advantage over this: they give you the home assistant code for any icon in material. Sure, it's not hard to figure the code yourself, but being able to click a button and get the right one is great

czhu12• 6 months ago

Huge props to this project. Use it daily for everything I’ve built. It has icons on basically everything.

I was pleasantly surprised the other other day that it had both colored and uncolored devicons for the k3s project, which definitely isn’t that mainstream

atonse• 6 months ago

Iconify solved icons for us. I love just sending a designer or UX person there and telling them to go nuts.

Iconify: Library of Open Source Icons

Related Stories