SVG is an awesome way to bring vector images into a design and development workflow. But collecting and organizing SVG files on your computer can be challenging.
How can Iconset help take away the pain and get us more productive?
- What is SVG?
- What is Iconset?
- What are we going to learn?
- Part 1: Getting started with Iconset
- Part 2: Adding icons to Iconset
- Part 3: Using Iconset with design software like Figma
- Part 4: Using Iconset in development like with React
- Part 5: Syncing Iconset across multiple computers with Dropbox
What is SVG?
SVG is a nearly 20 year old image file format. And while it’s been around for a while, it has only recently been gaining momentum in the development community.
SVG is great for a number of reasons. First of all, it’s a vector format, meaning it scales as big or small as you want.
But it’s also flexible in that you can use SVG right in your development project with a typically small file size and infinite scale. You can even animate it!
But trying to collect and organize a bunch of files can be challenging. What do you name them? Do you have a computer that can easily preview them? What about search?
What is Iconset?
Iconset is a free cross-platform tool that allows you to collect and manage all of your SVG files in one place.
Love to quickly move between Font Awesome and heroicons but don’t want to keep switching libraries? You can use Iconset to make a quick search and drag it right into your project.
If you’re planning on using it for a React project, you can even copy the file as JSX and dump it right into your project!
What are we going to learn?
We’re going to walk through a few different scenarios that'll show us how Iconset is useful.
We’re also going to walk through how you can easily manage Iconset between different computers or environments so you can have the same great library anywhere you work.
Part 1: Getting started with Iconset
To get started, you’ll need to first install Iconset locally. It should be a similar installation process as any other application.
Once it’s ready and available locally, you should be able to open it up and see a UI with No Icons, which is expected, as it doesn’t come with any icons out of the box.
Part 2: Adding icons to Iconset
Adding icons to Iconset is as easy as dragging in, but you have a few options during the process.
To get started, let’s download the free icon set heroicons.
Download at: https://heroicons.com/.
On the heroicons website, you should see a big Download all button, which will download a zip file including all of the files.
If you navigate to the optimized folder, you’ll see that there are two different versions: solid and outline.
Now to get these into Iconset, select each folder individually and drag it right into Iconset.
Once there, you have a few options.
- Set: Since this is our first set, you’ll automatically be creating a new one. If you had existing sets, you could import into those sets.
- Set Name: Here we can name the set something that we’ll remember. For this, I recommend naming it “heroicons - Outline”.
- Import Options: these are optional settings, but I typically select the optimize and clean option to make sure any icons are immediately ready to get working with.
And once you click Import, it will do it’s thing, and you’ll now have your first set of icons in Iconset!
You can go ahead and do the same thing with the solid directory so then we’ll now have our two sets ready to go.
At this point, you can use Iconset to search through your icons and see all of your files currently available in your collection.
Part 3: Using Iconset with design software like Figma
The great thing about Iconset is how easy it is to use it with design software like Figma.
If I wanted to add an envelope icon to my website so people could contact me, I could search for the mail icon, and simply drag it onto my canvas:
I can then treat it like any other vector design element and immediately use it in my project.
Part 4: Using Iconset in development like with React
Another cool thing is how easy it is to use in a project like React.
Out of the box, you get a few different ways you can copy the file and use it in development like copying it as JSX.
If I feel like my Next.js Sass Starter could use some icons on the page, I can right-click any icon I want and under Copy As select JSX I can paste it right into my project!
And while it will need some styling once you drop it in just like any other image or icon, it’s immediately ready to go.
Part 5: Syncing Iconset across multiple computers with Dropbox
With Iconset, you have the ability to switch between different libraries. But importantly, you can also set the location of your library.
When Iconset creates your library, it stores everything as files and a database on your computer.
And inside the Iconset UI, we can both Move and Switch the location we use.
If this is your first time setting up Iconset, you can start by clicking Move and then selecting the location you want to sync it to.
And once you click Move, it will move it to that directory, like a folder on Dropbox, and sync to the cloud like any other folder and file.
Alternatively, if you already have a shared Iconset library or if you’re setting this up on a new computer, you can use the Switch option, and select that option right from Dropbox.
And once you hit Switch, you’ll now load up your shared library and be ready to get productive.
What else can you do?
Publish and share icon sets
Another cool feature is that you can export sets and share them. If you’ve spent a lot of time on a collection and want to share it with others, export it, publish it, and share it with the community!
More organization
Iconset also supports features like Folders and Favorites. This makes it even easier to group and collect the icons however it makes sense to you to keep you productive.
It also supports tagging, making it even easier to search.
