Auric Artisan Icon Hub

Find your symbol. Make it your own.

A focused icon workspace for Visual Studio Code, connected to icons.auricartisan.com. Search seven collections, refine the artwork, and insert the right code without leaving your editor.

12,895 icons · 32,802 indexed variants · Local artwork · Sidebar and full panel

Get started · Collections · Smart insertion · Automatic updates · Help

Get started

Requires VS Code 1.85 or newer.

1. Install the Icon Hub VSIX with Extensions: Install from VSIX….
2. Select Auric Icon Hub in the Activity Bar, or run Auric Icon Hub: Open Icon Hub from the Command Palette.
3. Open a writable file, search for an icon, and choose Insert, Copy, or its preview to inspect more formats.

The extension ID remains auric-artisan.auric-artisan-icon-lib. Your existing auricIconLib.* settings, favorites and recent items retain their storage identity.

A familiar Auric workspace

• A diamond-branded header and pill navigation match the Auric Font and Icon studios.
• Library, Favorites, Recent and Selected keep your working collection within reach.
• The sidebar starts with refinement controls collapsed, leaving more room for artwork.
• Refine library offers custom dropdowns for set, style, category, license and sort.
• Shape the output provides size, stroke and the custom Auric color picker.
• Reset filters clears search and refinements without discarding your selection or leaving the current scope.
• The full panel offers more room for browsing; the sidebar's expand button opens it alongside your editor.

Use Ctrl+K / Cmd+K within the Hub to focus search. Dropdowns support arrow keys, Home/End and Escape. Cards support arrow-key navigation, Enter to inspect, and F to favorite. Normal page and dropdown scrolling remains available.

Seven collections, one workspace

The icon count describes logical entries; variants are indexed separately. The aggregate Remix sprite is intentionally excluded because it is not a standalone icon. Material is font-backed and is not exported as SVG.

All icon bodies and preview fonts are bundled. Searching, previewing and exporting remain available without a connection.

From icon to code

Insert adapts to the active editor language. React editors receive JSX; ordinary JavaScript and TypeScript receive a named, quoted markup constant rather than raw SVG syntax. The Hub remembers the last active text editor when you move focus into its panel.

Multiple selections are supported. Read-only providers and rejected edits are reported instead of being recorded as successful insertions. If there is no available editor, the output is copied to the clipboard with a notification.

Choose an icon's preview to open the inspector, inspect its styles, select an output format, and insert, copy or save:

• SVG markup
• JSX or a React component
• HTML
• A data URI
• CSS
• A CDN snippet using https://icons.auricartisan.com/icon-cdn.js

Your CDN, connected on Insert

Insert uses https://icons.auricartisan.com/icon-cdn.js for all seven collections in HTML and supported web-framework source files. Material glyphs load their matching font from your CDN rather than appearing as names such as 4k_plus.

• On your first explicit insertion, the Hub creates a small icons.auricartisan.com.js bridge beside the saved source file and connects it. The bridge contains loader logic only: no local font files, embedded font data or icon catalog.
• HTML receives a deferred script reference. React, JavaScript/TypeScript, Vue and Svelte receive a side-effect import. Astro receives a browser-side script, not a server-only frontmatter import.
• The bridge loads your CDN script once and renders newly mounted icons and changes to icon attributes. Matching files and connections are reused; different existing files are preserved with a hashed alternative filename.
• Only the generated bridge is saved automatically. Review and save your source changes yourself.
• Browsing, searching, previewing, Copy and Save do not generate project support files.
• Setup requires a trusted workspace and a saved local or VS Code remote source file. JavaScript imports require module-aware tooling or a module script; server-rendered frameworks need the bridge in a browser/client entry.
• Standalone SVG, XML and non-Material CSS insertion remains self-contained. Material insertion into non-web source files reports a helpful error; use Copy for explicit markup or CSS formats.

CDN-rendered pages require network access. Your site's content security policy must allow the CDN for scripts, fetches and fonts, plus the loader's generated font styles. Serve the small bridge with your application. Previously generated local font stylesheets are not deleted automatically.

CDN deployment prerequisite: the icon bucket must allow cross-origin GET/HEAD requests for JSON and fonts. The live localhost check found that catalog JSON lacked an allowed-origin response header. A public-read CORS configuration is prepared in the workspace's scripts/r2-icons-cors.json; it has not been applied to production. Until it is deployed, other origins may show blank icons despite a valid loader connection.

For fully offline artwork, choose Copy as SVG or export SVG files instead. Material is font-backed and is not exported as SVG. The extension's browsing UI remains offline-ready and never executes the CDN loader inside its webview.

Tune the artwork

Expand Shape the output to change size, color or stroke width. Until you choose a color, artwork uses currentColor to follow the editor's foreground.

The custom picker includes a spectrum, color-space inputs, named colors, recent choices, shade ramps, harmonies and contrast tools. Eyedropper availability depends on the host. Stroke controls affect artwork that uses strokes; they do not turn filled glyphs into outline icons.

The controls apply to previews and generated output. Use VS Code settings under auricIconLib.* to change persistent defaults.

Collect and export

Select icons with their check buttons. The selection tray lets you:

• Copy sprite — combine selected SVG icons into a symbol sprite.
• Export ZIP — save selected artwork and the relevant license notices.
• Clear — empty the selection without changing favorites.

Selections are capped at 200 icons for each export request. Material glyphs are listed in the archive as font-backed entries rather than misrepresented as SVG files. Each collection keeps its own license.

The Smart Finder suggests recent icons or a rotating sample of the catalog. It is a local convenience feature, not a remote AI service.

Automatic metadata checks

When Icon Hub activates, it can check https://icons.auricartisan.com in the background. Automatic checks are enabled by default and run at most once per configured interval: 24 hours initially. Failed attempts also respect the cooldown. Refresh performs an explicit check without waiting.

Checks request only these public JSON files: meta.json, sets.json, stats.json, index.json and material.json under /data/. Requests are time-limited, size-limited, credential-free and reject redirects.

Downloaded metadata must match the bundled icon IDs, set contracts, styles and font mappings before replacing the cache. It can update compatible search metadata, but does not download new artwork or add new icon sets. New artwork is delivered through extension releases.

If the service is unavailable, invalid or incompatible, the current local catalog remains usable. Background failures do not interrupt you with notification popups. The main panel displays the update state; explicit refresh failures explain the offline fallback.

To turn automatic checks off:

{
  "auricIconLib.remoteRefresh.onStartup": false
}

To disable all catalog network checks:

{
  "auricIconLib.remoteRefresh.enabled": false
}

Set auricIconLib.remoteRefresh.intervalHours between 1 and 168 to adjust the cooldown. It is checked when the extension activates, not by a continuous background timer.

Useful commands

Search Auric Icon Hub in the Command Palette:

Quick Search uses Ctrl+Alt+Shift+I on Windows/Linux and Cmd+Alt+Shift+I on macOS.

Privacy and boundaries

No account, telemetry or search-query upload is required. Automatic checks contact the public catalog host, which can receive ordinary connection information such as your IP address. Your source code, search terms, favorites and usage history are not included in those requests.

Settings and personalization stay in VS Code storage. The local webview uses a nonce-based content security policy and validated messages; SVG is sanitized before preview and export.

See Security, third-party notices and licenses.

Troubleshooting

The catalog did not gain new icons after Refresh. Refresh updates compatible metadata only. Install an extension update for new artwork.

The UI says it is offline. Local browsing still works. Check connectivity or try Refresh later. Automatic retries are throttled.

Material names such as 4k_plus appear as text. Install the updated VSIX and reinsert the affected icons. New insertion uses CDN placeholders and connects your loader automatically. Save the source and reload the page with network access. Old local-font spans are not automatically rewritten.

Insert cannot use the editor. Focus a writable text file, then return to the Hub. Copy remains available when no editor can accept an edit.

I already have Icon Studio. Icon Hub is the dedicated seven-library tool with color controls and sprite/ZIP export. Icon Studio is the separate combined Auric-artwork, emoji and third-party catalog. They retain separate settings and views.

Report an issue with your VS Code version, Hub version, icon ID and steps to reproduce. Remove private code from screenshots.

License and development

The extension uses the Auric Artisan Free Use Licence. Exported third-party artwork remains subject to each upstream license and attribution requirements.

For development, run npm run vscode:prepublish and npm run vsix. The repository folder remains Auric-Artisan-Icon-Lib because Icon Studio's build consumes its shared formatter and catalog.

For browser UI checks, run npx playwright install chromium once, then npm run test:browser. This checks the real webview assets with a simulated VS Code message bridge at desktop and sidebar widths, including light and high-contrast modes. It does not replace testing in the VS Code extension host.