Iconify: Library of Open Source Icons

(icon-sets.iconify.design)

306 points | by sea-gold 6 hours ago

14 comments

  • primaprashant 1 hour 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/
  • hirako2000 2 hours 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

    • catoc 7 minutes 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?)

    • echoangle 1 hour 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.
      • hirako2000 47 minutes 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

    • albert_e 1 hour 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.

      • hirako2000 46 minutes 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.

  • FireInsight 4 hours ago
    https://icones.js.org/ is a good site to search through these IMO
  • RestartKernel 4 hours 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 1 hour 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.
  • stared 36 minutes 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.

  • davidcann 1 hour 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
  • sea-gold 6 hours ago
    Previous discussions:

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

  • aziis98 2 hours ago
    This simply solved icons for me
  • ulrischa 4 hours ago
    Question to all HN Users: what is the best icon library?
    • thecopy 3 hours ago
      • egeozcan 2 hours ago
        I learned about this thanks to claude always using it.
      • deaux 57 minutes ago
        These now instantly ring everyone's slop alarm bells. I'd choose any set over them.
    • Bewelge 3 hours ago
      I really like https://phosphoricons.com/

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

    • tezza 3 hours ago
      I’ve used FlatIcon extensively. My use case is video games rather than web design.

      https://www.flaticon.com/

    • mbsa7 2 hours 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 1 hour 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/

        • mbsa7 3 minutes ago
          I agree with you on the license issue, don't really mind the descriptions being too verbose or SEO oriented though but that's personal taste.
    • coolewurst 3 hours ago
      I like Material Symbols best. Largest selection AFAIK and simple enough that you can create unique ones that fit in.
      • Alupis 3 hours 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.

        • coolewurst 2 hours ago
          I see your point and like to do things myself, just so they're mine, but I feel like there's only so many ways to skin a cat and draw a plus symbol.

          Most users will not care if they have seen a map icon in another app before anyway.

    • croisillon 2 hours ago
      famfamfam of course, the only set one will ever need
      • swhitf 2 hours ago
        The GOAT. I remember when basically every page on the internet had one of these icons on.
    • pixelready 4 hours 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.
  • DenisDolya 2 hours ago
    Thank you for sharing, this will come in handy for me.
  • mythz 3 hours 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.

  • nawaz0x1 1 hour ago
    Nice work
  • vjay15 4 hours ago
    Really useful thank you!
  • vikas-sharma 55 minutes ago
    [dead]