В дополнение к новому логотипу, представленному в прошлом году, Google Fonts добавил поддержку иконок с открытым исходным кодом. Теперь стали доступны Material Symbols от Google, использующие технологию вариативных шрифтов.
Многие из этих 2500 глифов должны быть знакомы пользователям приложений Google. Они следуют за прошлогодним выпуском коллекции «Material Icons» (2000 уникальных иконок в пяти стилях), которая по-прежнему доступна в Google Fonts.
Google разделил Material Symbols на категории: «Действия», «Android», «Аудио и видео», «Бренд», «Бизнес и платежи», «Общие действия», «Коммуникация», «Оборудование», «Дом», «Домашнее хозяйство», «Карты», «Другое», «Фото и изображения», «Конфиденциальность и безопасность», «Собственные», «Социальные», «Форматирование текста», «Транспорт», «Путешествия» и «Действия в интерфейсе».
Иконки доступны по лицензии Apache License 2.0 и предлагаются в трех стилях (контурный, скругленный и четкий) с возможностью настройки заливки, толщины, насыщенности и оптического размера.
- Контурные (Outlined) иконки — это легкий, чистый стиль, который хорошо подходит для плотных пользовательских интерфейсов.
- Скругленные (Rounded) иконки используют скругленные углы, что хорошо сочетается с брендами, использующими более жирную типографику, изогнутые логотипы или круглые элементы для выражения своего стиля.
- Четкие (Sharp) иконки используют прямые углы и края для создания строгого, прямоугольного стиля, который остается читабельным даже в небольших размерах.
Их могут использовать веб-разработчики, а также разработчики для Android (в формате Vector Drawable) и iOS (в виде Apple Symbols), при этом «планируется поддержка Material Symbols во Flutter». Также доступен плагин для Figma.
Заливка (Fill) дает возможность изменять стиль иконки по умолчанию. Одна и та же иконка может отображаться как в незалитом, так и в залитом состоянии.
Для передачи перехода между состояниями используйте ось заливки для анимации или взаимодействия. Значения варьируются от 0 (по умолчанию) до 1 (полностью залито). Наряду с осью толщины, заливка также влияет на внешний вид иконки.
Толщина (Weight) определяет толщину обводки символа в диапазоне от тонкой (100) до жирной (700). Толщина также может влиять на общий размер символа.
Толщина (Weight) и насыщенность (Grade) влияют на толщину символа. Регулировка насыщенности более точная, чем регулировка толщины, и оказывает незначительное влияние на размер символа.
Оптические размеры (Optical sizes) варьируются от 20dp до 48dp.
Чтобы изображение выглядело одинаково при разных размерах, толщина обводки изменяется при масштабировании иконки. Оптический размер позволяет автоматически настраивать толщину обводки при увеличении или уменьшении размера символа.
Обновление: Добавлены дополнительные подробности из анонса в блоге Google.