How does Icon Shelf copy icons as React, Vue, Ember code?

Icon Shelf generates framework-ready import statements and copies them to your clipboard when you trigger a copy action on an icon. According to the site, it supports React, Vue, Svelte, and Ember, and you can customize the copied text to match your project's conventions. The tool is free and open source, and runs on macOS, Windows, and Linux.

What actually gets copied

The site describes the copy action as producing "import statements for popular frameworks." In practice, that means the clipboard receives a code snippet rather than the raw SVG markup — the exact shape of that snippet depends on the framework template you've configured.

The site does not publish the literal output strings for each framework, so treat the following as the general pattern rather than a quoted example:

• React — an import line referencing the icon, plus a JSX usage tag
• Vue — an import line plus a component tag
• Svelte — an import line plus a component tag
• Ember — an import line plus the corresponding template invocation

If you need the precise output, the reliable way to check is to copy an icon and paste it into a scratch file — the site explicitly frames the feature as "copy to clipboard," so the result is inspectable before you commit it to a codebase.

How to copy an icon as code

1. Connect Icon Shelf to your project's assets folder. The site describes connecting to your web project's assets folder so the tool can see your icons. It states that Icon Shelf does not add any extra files to the connected assets folder.
2. Create or select a collection. Collections let you group icons per project and switch between them.
3. Find the icon. Use the search bar, or press cmd/ctrl+f to focus the search field directly. Icons are sorted by date added, and there's a large preview for each one.
4. Trigger the copy action. The site lists "handy shortcuts for the actions you do most," so the copy step is reachable without digging through menus.
5. Paste into your source file. You get the import statement (and usage snippet) for your configured framework.

Customizing the copied text

The site calls this out twice: "Fully customize 'copy to clipboard' text for your project," and "Get the icon embed code for React, Vue, Svelte and Ember."

This matters because default import paths rarely match a real project. If your components live under @/components/icons or your icons are exported from a barrel file, the default snippet will point somewhere wrong. Customizing the template once means every subsequent copy is paste-ready.

The site references a "How to customize copy action" section but does not publish the template syntax in the material available here, so the exact placeholder format isn't something to guess at — check that section in the app itself.

Beyond copying: related features

When this workflow fits

Icon Shelf is a reasonable fit if you keep a local folder of SVG icons and want to move them into component code without hand-writing import paths each time. The copy-to-clipboard approach means nothing is injected into your build — you stay in control of what lands in your source files.

It's a weaker fit if your icons already live in a package registry or a design system with its own codegen, since you'd be duplicating that pipeline. And because the site doesn't document the exact per-framework output strings, teams with strict lint rules on import ordering or path aliases should verify one copy against their config before rolling it out across a project.