Announcements

New updates and improvements to Icon Shelf

  1. Preview your icons in a custom colour

    New Feature
    Announcement

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

    Heres a small demo:

    image

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

    image

    Like

  2. Optimize your SVG icons - reduce file size and more

    New Feature
    image

    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.

    image

    image

    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.

    Like

  3. Create sub-collections to better organize icons

    New 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".

    image

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

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

    image

    Like

  4. Drag and drop icons in and out

    New Feature
    ezgif.com-gif-maker (1)

    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.

    Like

  5. Toggle b/w light and dark themes

    New Feature
    sd-light-mode

    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"

    Like

  6. Customize copy action for your project

    Announcement
    image

    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"

    image

    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

    Like