Иконки
Используем Phosphor. Словарь канона — весь набор библиотеки: имя иконки берётся из каталога /icons.json, а не из короткого списка. Вес — свойство скина, а не документа: словарь несёт под одним именем контуры regular и bold, база Blueprint показывает bold, а бренд возвращает regular токенами --icon-glyph-regular и --icon-glyph-bold. Иконка помогает прочитать подпись, но не заменяет её смысл. Размер берётся из кегля, цвет из currentColor.
Статус stable. В каноне с 2026-07.
Система
- Обязательно: Использовать один набор Phosphor и один вес на весь интерфейс: вес выбирает скин, внутри скина он одинаков везде.
- Запрещено: Смешивать веса на одном экране: разная толщина контура читается как разный смысл, которого у иконки нет.
Смысл
- Рекомендуется: Ставить иконку в пару с текстом, когда подпись снимает неоднозначность.
Имя
- Обязательно: Называть иконку именем из каталога
/icons.jsonодним полем, без веса: вес выбирает скин, а не документ. - Запрещено: Выдумывать имя иконки: документ с неизвестным именем движок заворачивает кодом
UNKNOWN_ICON.
Размер
- Обязательно: Масштабировать иконку через
1emили токен. Минимальный размер инлайн-иконки задаёт--icon-s. - Запрещено: Задавать размер иконки пиксельным литералом внутри компонента.
Цвет
- Обязательно: Наследовать
currentColor; для статуса использовать семантический токен.
Доступность
- Обязательно: Помечать декоративную иконку рядом с текстом
aria-hidden="true". - Обязательно: Давать доступное имя кнопке, в которой иконка заменяет текст.
Живая витрина
Словарь канона — весь набор Phosphor, 1512 имён: полный
список отдаёт /icons.json.
Ниже — частые имена и размеры по типографической шкале.
-
Check -
X -
Plus -
MagnifyingGlass -
CaretDown -
PencilSimple -
Trash -
Gear -
Info -
Warning -
ArrowsClockwise -
Funnel -
DotsThree -
ArrowSquareOut -
Eye -
EyeSlash -
PushPin -
ArrowsDownUp -
Copy -
Question
--fs-s--fs-m--fs-l--fs-xl