Developers

Put an icon picker inside your product

If your users pick icons - for a dashboard, a CMS, a docs site - you shouldn't have to build search and previews yourself. Paste one script tag and ours is live.

Install

One script tag, zero build step

html

<div data-iconvault-picker data-theme="light"></div>
<script src="https://iconvault.site/embed/v1.js" defer></script>

options

<div
  data-iconvault-picker
  data-theme="dark"    <!-- light or dark, default light -->
  data-limit="24"      <!-- results per search, 1-48 -->
  data-query="arrow"   <!-- run this search on load -->
></div>

Live demo

This is the real widget

The picker below is loaded from /embed/v1.js, the exact file your site would use. Type to search, click any icon to copy its SVG.

Why embed

It behaves like part of your page

Light or dark

One data-theme attribute. The picker inherits nothing and leaks nothing - all styles are scoped.

Framework free

Vanilla JS under 10 kB. Works in plain HTML, WordPress, React, or anything that renders a div.

Click to copy SVG

Every result copies clean, optimised SVG markup to the clipboard with a small confirmation toast.

Fast by default

Debounced search, lazy-loaded previews, and icons streamed from the edge cache.

Questions

Embed FAQ

No. The widget uses the public endpoints, so the normal keyless limits apply (120 searches a minute per IP). For heavy traffic, proxy searches through your backend with your own key.

Light and dark themes are built in via data-theme. Deeper theming is not supported yet - the widget is deliberately self-contained so it never fights your CSS.

Yes. The script watches for picker divs added after load, so client-side navigation and dynamically rendered content are handled.

The full optimised SVG markup for the clicked icon, e.g. <svg ...>...</svg>, ready to paste into HTML or save as a file.

Need higher limits?

Generate a free API key for 1,000 calls a month, or grab icons from the terminal with the CLI.

API access CLI