​​​↪️​ Нарисовать иконку

​​Для чего необходимы

​​Иконки помогают восприятию информации, так как считываются быстрее текста.
​​Они служат якорями на странице, их проще искать на экране, они помогают сориентироваться в интерфейсе (например, страница профиля). Здесь они разделяют контент, постепенно погружая в информацию. Также иконки помогают акцентировать внимание на ключевых моментах. С помощью привычных образов можно вызвать ассоциации с определёнными действиями: иконка лупы — провалиться в поиск, стрелка назад — вернуться, иконка звёздочки — добавить в закладки. Получается, хорошие иконки экономят время пользователя и место на экране устройства. 
​​

​​Типы иконок

​​По стилю они могут быть залитыми и контурными, плоскими и объёмными, монохромными и цветными. Для более удобного поиска иконки разбиты на категории. На данный момент мы разделили их на Social Actions, Product, Arrows, Commerce, Human, Media, Object and Tools, Date and Time, Navigation, Data, Text and Editing, Communication, Nature, Signs. 
​​

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

​​Применять иконки ради иконок не следует, они должны использоваться уместно. Иногда лучше написать понятный текст в несколько предложений. Используйте иконку только тогда, когда всем ясен её смысл. Не следует ставить иконки разных стилей в одном месте.
​​

​​Как нарисовать

  • ​​Используйте готовую сетку. Сетка помогает, но не ограничивает. Если вы понимаете, что ваша иконка смотрится лучше с элементами, выходящими за пределы сетки — пусть будет так.
  • ​​Используйте пиксельную сетку. Используйте целые и половинчатые пиксели. Силуэты иконок должны быть чистыми. Идеальные линии — наше всё. 
  • ​​Придерживайтесь одного уровня детализации, чтобы сохранить одинаковый вес. Более детализированные тяжёлые иконки будут привлекать больше внимания.
  • ​​Контролируйте размер зазора. Зачастую он должен быть равен толщине основной линии. Зазоры должны быть последовательными во всём наборе иконок.
  • ​​Линии иконки должны быть либо чётко связаны, либо чётко разделены.
  • ​​Не смешивайте плоские и объёмные иконки в одном наборе (привет, cube_box_outline_28).
  • ​​Иконки разных размеров должны иметь один образ.
  • ​​Старайтесь не использовать повторяемые элементы и рамки там, где они не нужны.

​​Иконки в библиотеке

  • ​​Используйте правильные названия групп и отдельных слоёв.
  • ​​Храните исходники иконок в отдельной группе.
  • ​​Используйте стили.
  • ​​Выбирайте инклюзивные названия.
  • ​​Рисуйте иконку под каждый размер отдельно.
​​

​​Правила именования

​​Шаблон названия компонента: name_XX
​​Например: key_square_outline_28
​​
​​Мы стараемся называть иконки инклюзивно, по объектам, которые изображены на них, а не по действиям, которые они будут выполнять. Такой подход позволяет переиспользовать иконки в разных частях интерфейса.
​​
​​
​​Нет
​​Да
​​
 
User-uploaded image: 1.png
​​apps_login_outline
​​key_square_outline
​​
 
User-uploaded image: 2.png
​​linked_devices_outline
​​check_shield_device_outline
​​
 
User-uploaded image: 3.png
​​follow_outline
​​add_square_outline
​​
 
User-uploaded image: 4.png
​​experts_outline
​​brain_outline
​​
 
User-uploaded image: 5.png
​​profile_outline
​​user_circle_outline
​​Некоторые иконки имеют закреплённые эксклюзивные названия. Вот список:
  • ​​story_outline
  • ​​sticker_outline
  • ​​share, like, comment, message
  • ​​podcast
  • ​​narrative
  • ​​и т. д.
​​
​​Множественную форму существительного используем, только когда в иконке есть несколько объектов. Примеры: users_3_outline, users_outline, services_outline. Если иконка обозначает набор чего-то — фотографий, видео — то в ней присутствует горизонтальная черта сверху, а основную форму составляет прямоугольник. В название таких иконок добавляется stack: picture_stack_outline.
​​
​​Если глиф нарисован внутри формы, форму добавляем в конце названия — add_square, check_circle. При именовании начинаем с внутреннего объекта и идём наружу: check_circle_device_outline. Примеры форм, внутри которых содержатся глифы: circle, square, shield, device, rectangles, stack.
​​