OpenSVG.dev - Free, Open-Source SVG & Vector Icons
OpenSVG.dev is a free, open-source, and customizable vector icon library with advanced design tools. Access over 321,000+ open-source vector icons from popular libraries (like Lucide, Tabler, FontAwesome, Material Icons, and more) without ever leaving your canvas. Organize collections, customize stroke and fill styles, and integrate seamlessly using our extensions for Figma, VS Code, Chrome, and Web.
Whether you are building React, Vue, Svelte, or plain HTML projects, OpenSVG.dev bridges the gap between design and development by generating clean, optimized code assets in real time.
📸 Screenshots
📥 Installation
Option 1: From VS Code Marketplace
- Open VS Code.
- Open Extensions view (
Ctrl+Shift+X or Cmd+Shift+X).
- Search for "OpenSVG.dev".
- Click Install.
Option 2: Via VS Code Command Line
code --install-extension mahbubhasanhira.opensvg-vscode
Keep your icon workflow unified wherever you design or code. Sign in to your OpenSVG.dev account inside the extension to access cloud synchronization:
- Manage Collections: Create, update, and delete custom icon collections directly from the extension sidebar.
- Collect Custom Assets: Create your own custom collections and sync icons seamlessly.
- Customize: Change icon styles (size, color, rotation, stroke, fill) and save customized icons directly to your collections.
- Bookmark Public Libraries: Instantly save public collections to your account for quick access later.
- Unified Workspace: Access your saved collections instantly across the VS Code Extension, Figma Plugin, Chrome Extension, and the OpenSVG Web App.
✨ Key Features
- 🔍 Unified Ultra-Fast Search: Access all major open-source icon sets in one unified interface, powered by lightning-fast instant search.
- 🎨 Live Customizer Panel: Adjust sizes, select preset or hex colors, apply rotation values, scale parameters, change fill/stroke, and perform horizontal/vertical flips with an interactive live preview.
- ⚡ Direct Editor Insertion: One-click insertion for SVG, JSX, TSX, Vue, Svelte, HTML, CSS, Data URI, and Base64 directly into your active code file.
- 💻 Robust Developer Exporters: Collapsible exporter cards let you copy code, download files, or insert code directly for:
- SVG, HTML, React JSX & TSX, Vue & Svelte
- CSS Background rules, Data URIs, and raw Base64 strings
- Multi-scale PNG & WEBP images (1x, 2x, 3x options)
💡 Why It Is The Best
- 100% Free & Open-Source: No paywalls, no limits, no subscription fees. Just high-quality vector assets.
- Code-Ready Output: Unlike default SVG exports, the React/JSX exporter automatically formats names correctly and spreads
{...props} into the root SVG tag, making it immediately ready to import into your React/Next.js/Vite project.
- Clean Code Sanitization: Automatically strips redundant annotations, comments, class attributes, and non-standard properties, leaving only pure, lightweight code.
👨💻 Creator & Author
Created and maintained with ❤️ by Mahbub Hasan Hira.
Feel free to connect, report issues, or contribute to the OpenSVG project!
🔗 Useful Links
| |
