Ever wanted to preview your icons in a custom colour? Well, now you can in Icon Shelf.

Heres a small demo:

If you want to see the icons in their original colours, click on this checkbox.

Now you can right-click on an icon and click on the "SVGO optimize" menu item to optimize that icon.

We use SVGO plugin to optimize the SVG. You can learn more about svgo here.

To customize SVGO preferences, simply go to "Preferences" and tick the svgo presets to be applied, and save.

But why optimize SVG icons?

SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.

Update to version 0.1.13 or up to use this feature.

We understand that you don't always store all your icons in one folder. You might create multiple sub-folders and store a set of icons there.

Now you can replicate the same in Icon Shelf as well.

Click on the 3 dots beside the collection and click on "create sub-collection".

Continue with the creation flow, just like creating a collection.

You now have a sub-collection created, in which you can store icons.

Now you can drag and drop icons to import and export.

Drag and drop icons from finder/explorer to add them to collection.

To export icons to tools like Figma, Photoshop etc, simple drag the icon from Icon Shelf and drop where needed.

We have been receiving feedback that for some projects, icons do look better in light theme.

Thats we bring to you light theme for icon shelf.

To toggle between dark and light theme, go to "view" and click on "Toggle Dark/Light mode"

Each web project would have its own way of importing icons. Icon Shelf can help you generate the perfect import statement for your project.

Let's customize the text that gets copied when clicking on the copy action.

Click on the 3 dots beside your collection. And click on "Customize action"

Press on the edit icon beside the action you wanna customize and update the icon import template string on the screen.

To learn more, visit: https://icon-shelf.github.io/faqs/customize-copy-action