React Icons — все иконки для React в одной библиотеке

React Icons — библиотека, которая собирает популярные наборы иконок в одном npm-пакете. Иконки импортируются как React-компоненты, поэтому их удобно вставлять в кнопки, меню, карточки и формы.

Базовое использование React Icons

React Icons полезен именно как практичный инструмент: вы импортируете конкретную иконку, ставите её в кнопку или меню и управляете размером через props. Важно сразу привыкнуть не тянуть весь набор иконок в сборку.

После первого примера стоит сразу проверить два бытовых сценария: иконка рядом с текстом и иконка внутри кнопки. Именно там чаще всего появляются проблемы размера, цвета и доступности.

Установка

npm install react-icons --save

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

import { FaGithub } from 'react-icons/fa';
import { MdSearch } from 'react-icons/md';

function Header() {
  return (
    <header>
      <MdSearch size={24} />
      <a href="https://github.com">
        <FaGithub aria-hidden="true" />
        GitHub
      </a>
    </header>
  );
}

Популярные префиксы

Иконка в кнопке

import { LuSave } from 'react-icons/lu';

function SaveButton() {
  return (
    <button type="button" className="icon-button">
      <LuSave aria-hidden="true" />
      <span>Сохранить</span>
    </button>
  );
}

Размер и цвет

<LuSave size={20} color="#2563eb" />

// или через CSS
.icon-button svg {
  width: 20px;
  height: 20px;
  color: #2563eb;
}

Доступность

Если иконка только украшает кнопку с текстом, добавьте aria-hidden. Если кнопка состоит только из иконки, у кнопки должен быть aria-label.

<button aria-label="Удалить">
  <LuTrash aria-hidden="true" />
</button>

Мини-проект: список действий

Иконки часто хранят прямо в массиве конфигурации меню или панели действий. Так проще не дублировать JSX.

import { LuDownload, LuPencil, LuTrash } from 'react-icons/lu';

const actions = [
  { label: 'Редактировать', icon: LuPencil },
  { label: 'Скачать', icon: LuDownload },
  { label: 'Удалить', icon: LuTrash },
];

function ActionsMenu() {
  return (
    <div>
      {actions.map(action => {
        const Icon = action.icon;
        return (
          <button key={action.label}>
            <Icon aria-hidden="true" />
            {action.label}
          </button>
        );
      })}
    </div>
  );
}

Как выбирать набор иконок

• Для интерфейсов инструментов хорошо подходят Lucide, Feather, Tabler.
• Для брендов используйте Simple Icons.
• Для Bootstrap-проекта удобно взять Bootstrap Icons.
• Не смешивайте 5 разных стилей иконок на одном экране.

Производительность

Не импортируйте весь набор через объект. Импортируйте конкретные иконки по имени. Тогда сборщик сможет оставить только используемый код.

На практике это значит: пишите import { FiSearch } from ‘react-icons/fi’, а не импортируйте весь набор и не выбирайте иконку динамически из большого объекта. Так сборка остаётся меньше и понятнее.

Как не испортить интерфейс иконками

Иконки помогают быстро считывать действия, но только если они выдержаны в одном стиле и не заменяют понятный текст там, где текст нужен. Особенно это важно в кнопках удаления, сохранения и навигации.

Один набор иконок на проект обычно смотрится лучше, чем смесь из нескольких библиотек. Если иконка отвечает за опасное действие, например удаление, оставляйте текст или понятную подпись рядом, а не полагайтесь только на символ.

Правила для рабочего интерфейса

• используйте один-два набора иконок на проект;
• не смешивайте контурные и залитые иконки без причины;
• иконка без текста должна иметь aria-label на кнопке;
• декоративной иконке добавляйте aria-hidden;
• размеры иконок лучше задавать через CSS, чтобы они были едиными.

Что выбрать для React-проекта

Для интерфейсов инструментов чаще всего хорошо смотрятся Lucide, Feather или Bootstrap Icons. Для логотипов сервисов используйте Simple Icons. Font Awesome удобен, когда нужен большой универсальный набор.

Проверка перед релизом

Пройдитесь по странице без чтения текста и посмотрите, не спорят ли иконки между собой. Если одна кнопка выглядит из другой системы, пользователь это заметит быстрее, чем кажется.