Documentation
Welcome to the IconVault documentation. Learn how to fetch, use, and scale our premium SVGs in your React, Vue, or HTML projects.
How to use your Icons
1. Copy SVG Code (Recommended)
The fastest way to use an icon is to click the "Copy SVG" button. You can paste it directly into your React components (JSX) or standard HTML.
export default function MyComponent() {
return (
<div className="flex items-center gap-2">
{/* Pasted IconVault SVG */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C17.5228... (SVG PATH DATA)" fill="currentColor" />
</svg>
<span>Settings</span>
</div>
);
}Framework Specific Quick-Tips
See how to easily style icons in React, Vue, Svelte, and HTML.
In React (JSX), remember to use className instead of class. To easily control size and color with Tailwind CSS, apply text colors and dimension utilities directly to the SVG.
<svg className="w-6 h-6 text-blue-500" viewBox="0 0 24 24" ... />2. Download SVG File
Click "Download SVG" to save the raw file. Import it into Figma, Illustrator, or your project's static assets folder.
3. Download PNG
Download a high-resolution, transparent PNG version. Perfect for social media, presentations, or places where inline SVG isn't supported.
Available Variants
Every icon comes in multiple styles to match your design system perfectly. Here are the variants currently supported:
- •Line / Outline: Clean, minimal, and transparent strokes.
- •Solid / Filled: Bold, filled geometric shapes.
- •Two-Tone: Professional dual-color paths for extra depth.
- •Flat / Colored: Vibrant, flat colors perfect for modern illustrations.
- •Gradient: Smooth, eye-catching color transitions baked into the SVG paths.
- •Hand-Drawn / Doodle: Playful, organic shapes that look hand-sketched.
- •3D: Simulated lighting, shadows, and perspective for a pop-out effect.