Библиотека иконок

Показано 48 из 80 иконок

Как использовать иконки

Простой способ добавить иконки в ваш проект

1

Найдите иконку

Используйте поиск или фильтры для поиска нужной иконки. У нас есть иконки для любых целей.

2

Кликните для копирования

Нажмите на иконку чтобы скопировать SVG код в буфер обмена. Код готов к использованию.

3

Используйте в проекте

Вставьте код в ваш HTML или импортируйте как компонент. Все иконки оптимизированы.

Примеры использования

HTML использование

<!-- Просто вставьте SVG код -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
     stroke="currentColor" stroke-width="2" 
     stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>

Иконки используют currentColor для наследования цвета

React компонент

const StarIcon = ({ size = 24, color = 'currentColor' }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" 
         fill="none" stroke={color} strokeWidth="2"
         strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
);

Создайте переиспользуемый компонент

CSS стилизация

.icon {
    width: 24px;
    height: 24px;
    color: #BB86FC; /* Измените цвет */
    transition: color 0.3s ease;
}

.icon:hover {
    color: #03DAC6; /* Цвет при наведении */
    transform: scale(1.1);
}

Легко стилизуйте с помощью CSS

Почему наши иконки?

⚡

Мгновенное копирование

Кликайте на иконки и получайте готовый SVG код. Никаких скачиваний или установки.

🎨

Векторные SVG

Все иконки в векторном формате. Четкое отображение на любых разрешениях и устройствах.

🔍

Умный поиск

Мощная система поиска и фильтрации. Быстро находите нужные иконки по названию или категории.

🔄

Постоянные обновления

Регулярно добавляем новые иконки и улучшаем существующие. Следите за обновлениями!

💾

Оптимизированный код

Все SVG иконки оптимизированы для веба. Минимальный размер и максимальная производительность.

🎯

Доступность

Иконки разработаны с учетом accessibility. Поддержка screen readers и клавиатурной навигации.