Документация для разработчиков
Библиотека векторных и 3D иконок для разработчиков и дизайнеров
Добавьте каталог из 76,166 иконок, JSON поиск и компоненты без зависимостей в проекты на React, Next.js, Vue 3, Svelte, Tailwind CSS или PHP.
1. JSON поиск и фасеты (GET /api/icons)
Фильтруйте по слову, папке библиотеки, категории, стилю или лицензии. Ответ вернет значки по страницам с безопасным SVG, подсказками и совпадающими фасетами.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. Прямые адреса векторных файлов
# 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. Шаблон компонента без зависимостей
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>
);
}
Практические Руководства и Уроки по SVG
SVG против PNG: Какой Формат Выбрать?
Используйте SVG для иконок сайтов, логотипов и интерфейсов, так как векторные контуры остаются четкими на любом экране. Используйте PNG, когда нужно растровое изображение фиксированного размера.
Как Анимировать SVG-Иконки с Помощью CSS
Добавьте CSS-класс к встроенному тегу SVG и используйте ключевые кадры transform или stroke-dasharray. Наш живой редактор создает плавные анимации 60fps без JavaScript.
Как Редактировать SVG в Figma или Браузере
Скопируйте код SVG с сайта SVG Nexus и вставьте его прямо на холст Figma или Illustrator, либо откройте иконку в нашей Векторной Студии в браузере.
Как Использовать SVG в React, Next.js и Vue
Выберите вкладку React TSX или Vue 3 на странице любой иконки, чтобы скопировать готовый компонент с поддержкой currentColor и Tailwind CSS.