Icon Organizer

SF Symbols

SF Symbols by Apple is one of the most beautiful icon libraries. It is a set of over 2,400 symbols, with multicolor options that automatically adapt to vibrancy and accessibility settings. It also has localized symbol variants, perfect for different languages.

Material Icons

If you are designing for Android, Material Icons may be the way to go. It is an extensive icon library, each of the symbols have five different themes and different densities. If you'd like to organize them you can use IconJar, a tool that we will talk about later.

IconJar

IconJar2 is a tool than helps you with organizing your icons. You can import an SVG icon, name it and create folders as well as libraries. The best thing is that you can filter the icons and export the same in different sizes.

Streamline icons

Besides the option that you can import your Streamline icons using IconJar. It also has a webApp, that can help you with navigating over 30,000 icons from its library.

IconFinder

IconFinder supports IconJar which is really helpful for when you want to organize your IconFinder icons.

Icons8

Icons8 is another popular icon library, that also has a macOS app as well as plugins for Figma, Photoshop and Illustrator.

SmashIcons

SmashIcons has a very unique and artsy library of icons. It has a web app which helps the user to organize the icons.

Nucleo

Nucleo is an icon library and organizer. It has more than 30,000 icons and it is pretty handy when you want to organize your icons by folders or projects.

How to transform an icon font to SVG

For this exercise, we will use IconJar.

Now that we have taken a look at all the different characters we can use. Let's go to IconJar, and in Preferences let's go to import and over there make sure to check the OTF, TTF and WEBP boxes. So we can import our font.

In IconJar, click on the plus icon "+" and select New Set... so we can add the font.

In the small modal, make sure to choose New Set and choose the font you want to import. Wait for a couple of seconds and you will see all the characters of the font imported to IconJar.

Now, we can choose any character. From the left sidebar, click on the ImgOptim dropdown and select Sketch from the dropdown so we can export the icon to Sketch.

Voila! You just took a character from a font and transformed it in a small icon library, transformed one of the characters to SVG and moved it to Sketch.

Conclusion

Icon organizers are helpful in the design process. Either for when you want to gather certain icons for a specific project or to share a group of icons with a stake holder. These icon organizing tools can save you some time and help you focus more on the design.