Browse and insert 2,700+ handcrafted Reicon SVG icons directly into your HTML, React, Vue, Svelte, or vanilla JS code. Outlined and filled styles available.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Browse and insert 2,700+ handcrafted Reicon SVG icons directly into your HTML, React, Vue, Svelte, or vanilla JS code.
Reicon for VS Code brings the official, pixel-perfect Reicon library right into your code editor. Browse, search, customize, and insert icons instantly in multiple formats with zero context switching.
🎨 Features
Activity Bar Panel: A custom sidebar panel that houses the icon browser.
2,700+ Pixel-Perfect Icons: Browse the complete collection in both Outline and Filled weights.
Smart Code Insertion: Click any icon to instantly insert it at your cursor in your preferred framework syntax:
React (JSX): <Home size={24} color="#6c5ce7" />
Vue: <Home :size="24" color="#6c5ce7" />
Svelte: <Home size={24} color="#6c5ce7" />
SVG: Raw SVG code <svg ...>...</svg>
Live Customization: Adjust size (in pixels) and color (using preset swatches or hex inputs) directly in the sidebar toolbar before inserting.
Smart Theme Adaptation: Automatically uses currentColor by default to match your VS Code theme (automatically switches between dark/light text colors).
State Persistence: Remembers your preferred format, color, size, and category choices between editor sessions.
Clipboard Fallback: Copies the formatted code snippet to your clipboard automatically if no text editor is currently active.
