Developer Docs
Vector and 3D icon library for developers and designers
Add the 76,166 icon catalog, the live JSON search API, and zero-dependency components to React, Next.js, Vue 3, Svelte, Tailwind CSS, or PHP projects.
1. Live JSON search and facets API (GET /api/icons)
Filter by keyword, library folder, category, style, or license. The response returns paginated icons with safe inline SVG, suggestions, and matching facets.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. Direct vector asset endpoints
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. Zero-dependency component pattern
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
Practical SVG Guides and Tutorials
SVG vs PNG: Which Format Should You Use?
Use SVG for website icons, logos, and user interfaces because vector paths stay sharp on every screen size and retina display. Use PNG when you need a fixed-pixel image for email signatures, legacy apps, or social media thumbnails.
How to Animate SVG Icons with CSS
Add a CSS class to your inline SVG element and apply transform or stroke-dasharray keyframes. Using transform: scale() or rotate() with transform-origin: center creates smooth 60fps hover and loading animations without JavaScript.
How to Edit SVG Icons in Figma or Your Browser
Copy the raw SVG code from SVG Nexus and paste it directly onto your Figma canvas to edit vector nodes and fills. You can also open any icon in our browser SVG Editor to change colors, stroke width, and viewBox without installing software.
How to Use SVG Icons in React, Next.js, and Vue
Select the React TSX or Vue 3 tab on any icon page to copy a ready-to-use component. The exported code uses currentColor so your icon automatically matches your Tailwind CSS or CSS text color classes.