How to Organize Icons into Collections and Sync Them with Your Team in Icon Shelf

Icon Shelf organizes icons by collections — one collection per project — and syncs a collection folder through a cloud service like GitHub, Dropbox, or Drive so your team sees the same icons. The key constraint to know up front: Icon Shelf connects to your web project's assets folder but does not add any extra files to that folder, so your build output stays clean. Everything below comes from the tool's own documentation; treat the sync steps as a general pattern, since the site describes the capability without listing exact menu paths.

Create one collection per project

A collection is the unit of organization. The intended workflow is to create a separate collection for each project and switch between them as you move between codebases, rather than keeping one giant icon set.

• Create a collection for each project you work on.
• Switch between collections when you change projects — this is the main reason to split them in the first place.
• Keep collections scoped to a project's assets folder so the icons you copy are the ones that actually ship.

If you skip this and dump every icon into one collection, the search bar becomes the only way to find anything, and you lose the project-level separation that makes team sync meaningful.

Find and preview icons inside a collection

Once a collection is populated, two features do the retrieval work:

Sorting by date added means the most recently imported icons appear first, which is useful right after you add a batch. When the collection grows past the point where scrolling works, use the search bar rather than the preview.

Connect the collection folder for team sync

Sync works by pointing a collection's folder at a shared service. The documentation names GitHub, Dropbox, and Drive as the services you can connect, and describes the result as collaborating with your team on the same collections.

The general steps:

1. Choose the collection you want to share.
2. Connect its folder to GitHub, Dropbox, or Drive.
3. Let teammates connect to the same folder so they pull the same icon set.

Expected result: everyone on the team works from one shared set of icons, and changes propagate through the cloud service rather than through manual file passing.

Important behavior to plan around: Icon Shelf does not add extra files to the connected assets folder. So the sync is about the icons themselves — you won't find a manifest or metadata file dropped into your project's assets directory that you then need to gitignore.

Copy icons as framework code

The point of organizing icons is to get them into code quickly. Icon Shelf copies icons to the clipboard as import statements for popular frameworks, and the copy text is customizable per project.

• Supported targets named on the site: React, Vue, Svelte, and Ember.
• Customizable copy action: you can change the "copy to clipboard" text to match your project's import conventions.
• Shortcuts: the tool provides shortcuts for the actions you perform most, so copying doesn't require mouse navigation.

If your project uses a non-standard import path or a wrapper component, set the custom copy text once per collection instead of editing each paste.

Supporting features worth knowing

These don't affect organization directly but shape how you use collections day to day:

• Drag and drop — drag icons from a collection into your design tool.
• SVG optimizer — clean up SVGs before they go into production.
• Cross-platform — macOS, Windows, and Linux.
• Free and open source — the site states the tool is free to use; no pricing or account requirements are described in the available material.

Common snags

• One collection for everything. The switching and team-sync features assume per-project collections. Merging them defeats both.
• Expecting files in the assets folder. The tool explicitly does not add extra files there — don't look for a config or index file to commit.
• Assuming sync is built in. Sync runs through an external service (GitHub, Dropbox, Drive), so teammates need access to that same folder, not just to Icon Shelf.
• Forgetting the custom copy text. Default import statements may not match your project's paths; set the custom copy action before a large copy-paste session.