
Система из 40к+ SVG иконок
Платно

Nucleo — это комплексная экосистема управления иконками, включающая более 40 000 премиальных SVG-иконок и специализированное десктопное/веб-приложение для оркестрации ассетов. В отличие от статических библиотек, Nucleo предоставляет нативное приложение, позволяющее искать, настраивать и экспортировать иконки в различных форматах (SVG, PNG, PDF) и размерах без отрыва от рабочего процесса. Интеграция напрямую в среду разработки через React-пакеты обеспечивает единообразие иконок во всех UI-компонентах. Платформа создана для масштабируемости и предлагает множество визуальных стилей — от пиксельных UI-наборов до жирных, микро- и изометрических вариантов, становясь единым источником истины для дизайн-систем и продуктовых команд.
Десктопное приложение Nucleo выступает в роли локального менеджера ассетов, позволяя просматривать, искать и экспортировать 40 000+ иконок без интернета. Поддерживается пакетный экспорт и настройка размеров, что значительно быстрее, чем загрузка отдельных файлов из веб-репозиториев. Локальный подход гарантирует стабильный рабочий процесс даже офлайн, а встроенный движок автоматически оптимизирует SVG и упрощает пути.
Nucleo предоставляет специализированные React-пакеты, позволяющие разработчикам импортировать иконки как нативные компоненты. Это исключает необходимость вручную управлять SVG-файлами в директории проекта. Используя пропсы для размера, цвета и толщины линий, разработчики могут динамически обновлять стили иконок в зависимости от состояния приложения, уменьшая размер бандла и обеспечивая единообразие рендеринга с остальной библиотекой UI-компонентов.
Библиотека включает более 40 000 иконок в различных стилях: Core, UI, Sharp, Pixel и Micro. Каждый стиль тщательно проработан с использованием единой сетки и языка дизайна. Это позволяет командам переключаться между стилями (например, с 'Sharp' на 'Pixel') во всем интерфейсе продукта, сохраняя визуальную гармонию, что крайне сложно при смешивании иконок из разных open-source наборов.
Приложение оснащено встроенным редактором для изменения свойств иконок перед экспортом. Пользователи могут в реальном времени настраивать толщину линий, радиус скругления и цветовые палитры. Это гарантирует соответствие каждой экспортируемой иконки брендбуку проекта, избавляя от необходимости постобработки в стороннем векторном ПО вроде Illustrator и экономя время при передаче дизайна в разработку.
Каждая иконка в библиотеке Nucleo снабжена подробными метаданными, что обеспечивает мгновенный поиск среди 40 000+ ассетов. Алгоритм поиска учитывает контекст, позволяя находить иконки по функции (например, 'навигация', 'редактор') или визуальным характеристикам. Эта высокопроизводительная функция критически важна для крупных команд, которым нужно быстро находить UI-элементы для поддержания скорости прототипирования и разработки.
Скачайте и установите десктопное приложение Nucleo для macOS или Windows с официального сайта.,Запустите приложение и просматривайте библиотеку из 40 000+ иконок с помощью строки поиска или фильтров по категориям.,Выберите иконку и используйте панель настройки для изменения толщины линий, цвета и размера перед экспортом.,Перетаскивайте иконки напрямую в инструменты дизайна, такие как Figma, Sketch или Adobe XD.,Установите пакет @nucleo/react через npm для программного рендеринга иконок как React-компонентов в вашем коде.,Синхронизируйте проект с приложением Nucleo для поддержания согласованности между дизайн-ассетами и кодом.
Продуктовые дизайнеры используют Nucleo как единый источник истины для иконок. Экспортируя стандартизированные ассеты, они гарантируют, что все UI-элементы в веб- или мобильном приложении имеют одинаковую толщину линий и выравнивание по сетке, что создает целостный визуальный облик.
Фронтенд-разработчики используют React-пакет Nucleo для внедрения иконок прямо в код. Это избавляет от необходимости управлять тысячами отдельных SVG-файлов, позволяя менять цвета и размеры иконок через пропсы, что ускоряет внедрение обновлений интерфейса.
Агентства, работающие над несколькими проектами, используют Nucleo для организации иконок в пользовательские 'проекты' или 'коллекции'. Это позволяет быстро переключаться между дизайн-языками разных клиентов, не загромождая локальную файловую систему тысячами неиспользуемых ассетов.
Им требуется обширная и согласованная библиотека иконок для создания высокодетализированных прототипов. Nucleo решает проблему 'фрагментации иконок', когда разные наборы конфликтуют по стилю, обеспечивая профессиональный и унифицированный вид всех UI-компонентов.
Им нужен программный способ внедрения иконок без ручной оптимизации SVG. Интеграция Nucleo с React позволяет работать с иконками как со стандартными компонентами, улучшая поддержку кода и сокращая время сборки.
Агентства ведут несколько проектов одновременно. Nucleo предоставляет инструменты для разделения и доступности библиотек ассетов, гарантируя, что дизайнеры смогут предоставлять качественную и единообразную работу в рамках различных требований проектов.
Единоразовая покупка набора иконок (около $99). Включает доступ ко всем 40 000+ иконкам, десктопному приложению и React-пакетам. Без абонентской платы.