Auric Artisan Icon Studio

Find the right icon. Keep your focus on the code.

Search Auric artwork, popular third-party icon sets and emoji in one offline workspace. Preview a style, keep your favorites close, and insert code in a format that fits your editor.

17,234 catalog entries · 11 collections · Sidebar and editor tab · No account or telemetry

Get started · Collections · Code output · Settings · Help

Auric Artisan · Release notes · Report an issue

Get started

Requires Visual Studio Code 1.85 or newer.

Install Auric Artisan Icon Studio. Its extension ID is auric-artisan.auric-artisan-icon-studio.
Select Icon Studio in the Activity Bar, or run Auric Icon Studio: Open Icon Studio from the Command Palette for a full editor tab.
Open the file you want to edit. Search for an icon, choose its collection and style, then select Insert or Copy.

For an official downloaded package, use Extensions: Install from VSIX….

All collections are bundled. You do not need to install the individual Auric collection extensions to search or insert their artwork.

Icon Studio is an artwork browser and code-insertion tool. To change file and folder icons in Explorer, use Auric Artisan File Icons.

A library that stays beside your work

Search across collections. Find icons by name, tag or synonym. For example, delete finds trash icons. Hindi search aliases are supported; this is not a claim of a fully Hindi-translated interface.
Refine the result. Filter by collection and category, select available styles, or choose a skin tone for supported emoji.
Keep useful icons close. Likes, Recent and For you recommendations use your local history and editor context.
Choose your workspace. Use the compact sidebar beside your code or open the larger editor-tab Studio.
Stay oriented. A sticky branded header keeps Library, For you, Likes and Recent in reach. Expand Refine library for filters; the sidebar starts with them collapsed to leave more room for artwork. Reset filters clears search and refinements without leaving your current library view.
Use the output you need. Insert, copy, choose an explicit format with As…, or save SVG artwork to a file.

Press / in the Studio to focus search. Available styles and output formats depend on the selected collection and artwork type.

Custom dropdowns support arrow keys, Home/End, Enter and Escape. Use the mouse wheel inside a long menu to scroll its options; normal wheel and Page Up/Page Down scrolling remains available on the page. Controls follow light and dark VS Code themes, with high-contrast and reduced-motion support.

Your icon collections

Collection	Entries	Available styles
Auric Modern	720	Color, Mono, Outline, Duotone
Auric Drawn	480	Color, Mono, Outline, Duotone
Auric Playful	1,225	Color, Outline, Filled, Small
Emoji	1,914	Native Unicode; default tone and five skin tones where supported
Phosphor	1,512	Thin, Light, Regular, Bold, Fill, Duotone
Tabler	5,093	Outline, Filled
Lucide	1,714	Regular
Remix	1,689	Line, Fill
Heroicons	324	24 Outline, 24 Solid, 20 Solid, 16 Solid
Feather	287	Regular
Material	2,276	Outlined, Round, Sharp, Regular, Two-tone

Counts describe the bundled catalog entries, not the total number of style or tone variants. Emoji appearance depends on your operating system and font. Material artwork is font-backed, not SVG.

Third-party collections retain their own licenses and attribution. See Third-party notices.

Insert in the format you need

Smart insert chooses an output format from the active editor language. Open a writable file and place your cursor before inserting. Multiple cursors are supported, and continuation lines preserve the cursor line's indentation.

Editing in	SVG artwork becomes
React JSX/TSX or MDX	A JSX element
JavaScript or TypeScript	A JavaScript string constant
HTML, Vue, Svelte, Astro or PHP	SVG markup
CSS, SCSS or Less	A CSS background
Markdown	A Markdown image
JSON, YAML or Python	A data URI

For explicit control, use As… or Auric Icon Studio: Copy Icon As…:

SVG artwork: SVG markup, JSX, a React component, a JavaScript string constant, a self-contained image tag, a Markdown image, CSS, a data URI or the icon ID.
Material glyphs: HTML or JSX spans, a React component, a JavaScript string constant, CSS declarations or the ligature name.
Emoji: the character, shortcode, Unicode code points or HTML entities.

Material Icons never export as SVG. Generated Material markup needs the corresponding font in your application; the Studio's bundled preview font is not automatically added to your project. Emoji insert as characters when smart insertion is used.

Smart insertion selects a format; it does not configure your application or guarantee valid syntax at every cursor position. Check quotes, surrounding code and accessibility labels before using the output.

Hover previews

Hover over a recognized Auric icon ID, such as files-blank-document-drawn-0001, to preview it in code. This feature previews artwork; use the Studio or insertion commands to add it. If the owning Auric collection extension is installed, Studio defers the preview to that extension.

Set auricIconStudio.hoverPreview to false to disable Studio's previews.

Commands and shortcuts

Open the Command Palette and search for Auric Icon Studio.

Action	Windows / Linux	macOS
Smart Insert Icon	`Ctrl+Alt+I`	`Cmd+Alt+I`
Insert from Recent	`Ctrl+Alt+R`	`Cmd+Alt+R`
Open Icon Studio	Command Palette	Command Palette
Search All Icons…	Command Palette	Command Palette
Copy Icon As… / Save Icon as SVG…	Command Palette	Command Palette
Insert from Likes	Command Palette	Command Palette

Shortcuts require editor focus and may yield to the individual Auric libraries depending on your hosting setting. Customize bindings in VS Code's Keyboard Shortcuts editor.

Insert a specific icon from a keybinding or macro

Use auricIconStudio.insertIcon with a catalog ID and supported format:

{
  "key": "ctrl+alt+shift+r",
  "command": "auricIconStudio.insertIcon",
  "args": {
    "id": "tabler-rocket",
    "format": "jsx"
  }
}

Copy an icon's ID from the available output formats instead of guessing it.

Make it yours

Open Settings and search for @ext:auric-artisan.auric-artisan-icon-studio.

Setting	What it controls
`clickAction`	Whether a Quick Pick choice inserts, copies, or does both
`smartInsert`	Language-aware output; enabled by default
`size`	Output size; `0` preserves the collection's native size
`color`	A fixed hex color or `currentColor`
`strokeWidth`	Stroke width for supported Tabler, Lucide and Feather artwork
`emojiSkinTone`	Preferred tone for emoji that support it
`density` / `pageSize`	Card spacing and results loaded per batch
`recommendations.enabled`	Locally ranked For you results
`hoverPreview`	Auric icon-ID previews in the editor
`hostFamilyLibraries`	Whether Studio hosts the individual Auric collection libraries

All keys use the auricIconStudio. prefix. Run Clear Likes, Recents and Learned Recommendations to reset Studio's personalization.

Works with your other Auric extensions

By default, Studio hosts the general-purpose Modern, Drawn and Playful collections and hides their separate library views, palette entries and shortcuts to reduce duplicates.

Set auricIconStudio.hostFamilyLibraries to false if you prefer their individual interfaces. Studio's shortcuts then step aside for theirs.

Auric Artisan Emoji and Auric Artisan Icon Library retain their own separate views. Auric Artisan File Icons remains the extension for Explorer file and folder themes; installing Studio does not replace it.

Offline by design

The catalog, SVG artwork and Material preview fonts ship with the extension. Studio makes no network requests and collects no telemetry. Recommendations and personalization are local.

Inserting changes your selected editor content. Copying writes to your clipboard, and saving SVG uses an explicit save dialog. Review what you insert or export, particularly when working with multiple cursors or replacing a selection.

Troubleshooting

Question	What to check
Why are there no search results?	Clear collection/category filters, switch from Likes or Recent to All, and try a simpler name or synonym.
Why is a style or skin tone unavailable?	Styles vary by collection; only some emoji support skin-tone modifiers.
Why does a Material icon appear as text in my application?	Load the matching Material font and styles. The extension's preview font is not installed into your project.
Why does the output need editing?	Smart insert chooses a format, not a complete application integration. Use As… for another format and check the insertion context.
Why did another Auric library view disappear?	Studio is hosting it. Disable `hostFamilyLibraries` to show the individual collection views again.
Why does the shortcut not run?	Focus the editor, check shortcut conflicts, and review the library-hosting setting.

For help, report an issue with your VS Code version, Studio version, collection, icon ID and steps to reproduce. Remove private code and paths from screenshots before sharing.

License and attribution

Studio and Auric artwork are covered by the Auric Artisan Free Use Licence, not an unrestricted asset license. Review its terms before extracting or redistributing artwork. Third-party icons remain governed by their upstream terms; see Third-party notices and the included licenses/ files.

For maintainers

The catalog is generated from sibling Auric projects at build time. Installed users do not need those projects.

Build, test and package locally

npm install
npm run build
npm run icon
npm run check
npm test
npm run test:integration
npm run vsix

Build the Auric collection catalogs first with npm run catalogs in Auric-Artisan-Icon-Library if they are missing. Studio's build vendors shared modules and reads source catalogs without modifying their owning projects. The integration command tests a real VS Code extension host; unit and webview tests run through npm test.