Как создавалась система иконок для Cursor — ИИ-помощника разработчика

Что произошло

Cursor — популярный ИИ-инструмент для разработчиков — полностью обновил свою систему иконок. Наследство от VS Code (на базе которого изначально строился Cursor) больше не соответствовало потребностям продукта, особенно для новых функций, связанных с ИИ.

Детали

Два размера для любого масштаба

• 16px — основной размер с обводкой 1.25px, остаётся читаемым даже при уменьшении до 12px
• 24px — версия с более толстой обводкой (1.5px) и дополнительными деталями, которые видны на крупных размерах

"1px? Слишком тонко. 1.5px? Слишком толсто. 1.25px? В самый раз" — так описывают поиск идеальной толщины линий.

Два стиля

• Контурные — построены из линий
• Залитые — сплошные формы с вырезанными внутренними деталями (не все иконки имеют такую версию)

Оптические принципы

• 4 базовые формы (квадрат, круг, горизонтальный и вертикальный прямоугольники) помогают сохранять единообразие размеров
• Естественные пропорции — карандаш остаётся узким, банкнота — широкой, без искусственного "впихивания" в квадрат
• Диагонали следуют направлению курсора (снизу влево — вверх вправо), а перечёркивающие линии идут в обратном направлении

Почему это важно

1. Единый язык — 600+ иконок выглядят как работа одного автора благодаря строгой системе правил
2. Читаемость — оптические корректировки (например, прорези в местах соединения линий) делают иконки чёткими на любых размерах
3. Техническая эстетика — стиль вдохновлён моноширинными шрифтами и чертежами, что идеально подходит для инструмента разработчика
4. Масштабируемость — система рассчитана на будущее расширение без потери целостности

Что дальше

Такой уровень детализации в дизайн-системах становится новым стандартом для профессиональных инструментов. Особенно это актуально для ИИ-продуктов, где важна чёткая визуальная коммуникация сложных концепций (параллельное выполнение задач, "уровни усилия" ИИ и другие уникальные понятия).