google/material-design-icons

Что это?

Ключевые возможности

• 01Два набора иконок: Material Symbols (актуальный вариативный шрифт) и Material Icons (классический набор, который больше не обновляется).
• 02В Material Symbols можно настраивать оси оптического размера, насыщенности, градации и заливки.
• 03Material Icons включает стили outlined, filled, rounded, sharp и two-tone.
• 04Доступны форматы SVG, PNG, веб-шрифтов, а также ресурсы для Android и iOS.
• 05Иконки можно использовать через ссылки на Google Fonts или скачанные файлы.

Сценарии использования

• Добавление согласованного набора иконок в интерфейс веб-приложения.
• Использование иконочных шрифтов на сайте через CSS-класс или ссылку на Google Fonts.
• Добавление иконок в стиле Material в приложения для Android или iOS.
• Настройка насыщенности и состояния заливки иконок с помощью параметров вариативного шрифта в CSS.

Быстрый старт

1. 1

   Откройте браузер значков Material Symbols и выберите значки

2. 2

   Установите созданный сообществом npm-пакет для SVG-значков

   npm install @material-design-icons/svg
3. 3

   Или подключите веб-шрифт Google Fonts в HTML

   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

Что важно знать

• !Material Icons больше не обновляется, поэтому новые значки появляются только в Material Symbols.
• !npm-пакеты поддерживаются сторонними разработчиками, а не Google.

Темы

Частые вопросы

Что такое material-design-icons?

Официальные наборы иконок Material Design от Google: Material Symbols и классические Material Icons в форматах SVG, шрифтов и ресурсов для Android и iOS. В этом репозитории собраны официальные иконки Material Design от Google в двух наборах. Material Symbols, представленный в 2022 году, — актуальный набор на основе вариативных шрифтов с настраиваемыми осями оптического размера, насыщенности, градации и заливки. Material Icons — классический набор в стилях outlined, filled, rounded, sharp и two-tone; он больше не обновляется.

material-design-icons можно использовать бесплатно? Какая у него лицензия?

material-design-icons распространяется с открытым исходным кодом под лицензией Apache-2.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.

material-design-icons всё ещё поддерживается?

Активно поддерживается. Последний коммит в material-design-icons — 9 окт. 2026 г..

Для чего можно использовать material-design-icons?

Добавление согласованного набора иконок в интерфейс веб-приложения. Использование иконочных шрифтов на сайте через CSS-класс или ссылку на Google Fonts. Добавление иконок в стиле Material в приложения для Android или iOS. Настройка насыщенности и состояния заливки иконок с помощью параметров вариативного шрифта в CSS.

Как установить material-design-icons?

Откройте браузер значков Material Symbols и выберите значки Установите созданный сообществом npm-пакет для SVG-значков: npm install @material-design-icons/svg Или подключите веб-шрифт Google Fonts в HTML: <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

Где скачать material-design-icons?

Исходный код и инструкции по установке — на GitHub: https://github.com/google/material-design-icons