Иконки Material
51 443 бесплатных SVG-иконок с открытым кодом в 6 наборах категории «Material». Самые крупные — Material Symbols Light, Material Symbols и Google Material Icons. Откройте набор, чтобы посмотреть иконки, проверить лицензию и скопировать код SVG, React, Vue или CSS.
Наборы иконок: Material (6)
Об иконках Material
Иконки Material следуют принципам Material Design от Google: геометрические формы на сетке 24 px с заливкой, контурные, скруглённые и острые варианты, которые естественно смотрятся в Android-приложениях, дашбордах и веб-приложениях на Material UI или Angular Material.
На Iconyz собрано 51 443 иконок категории «Material» из 6 наборов. Самые крупные — Material Symbols Light, Material Symbols и Google Material Icons. Все они монохромные: каждая иконка принимает цвет окружающего текста (currentColor), и её цвет можно менять через CSS.
Лицензии у наборов разные: 6 наборов можно использовать в коммерческих целях без указания автора. Сводка — в таблице ниже; на странице каждого набора есть ссылка на полную лицензию.
Лицензии иконок: Material
| Лицензия | Наборы иконок | Коммерческое использование | Указание автора |
|---|---|---|---|
| Apache-2.0 | 4 | Да | Не требуется |
| MIT | 1 | Да | Не требуется |
| OFL-1.1 | 1 | Да | Не требуется |
Это краткий обзор, а не юридическая консультация. Прочитайте наше руководство по лицензиям иконок и лицензию на странице каждого набора.
Вопросы и ответы: иконки Material
Можно ли бесплатно использовать Иконки Material в коммерческих проектах?
В основном да, но это зависит от набора. 6 из 6 наборов категории «Material» разрешают коммерческое использование без указания автора (Apache-2.0, MIT, OFL-1.1).
В каком наборе иконок «Material» больше всего иконок?
Самый крупный набор — Material Symbols Light: 15 802 иконок. В больших наборах выше шанс найти все нужные иконки, а значит, интерфейс останется визуально единым.
Как использовать Иконки Material в React, Vue или HTML?
Откройте любую иконку и скопируйте её код в виде SVG, JSX для React или Solid, компонента Vue или Svelte, Astro или CSS либо скачайте её в SVG или PNG. Можно также подключить иконку прямо в HTML тегом <img> со ссылкой на её SVG.
Можно ли изменить цвет: Иконки Material?
Да, у одноцветных наборов. Их SVG-код использует currentColor, поэтому встроенные иконки наследуют CSS-цвет родительского элемента. Если подключаете иконку как изображение, добавьте ?color=%23RRGGBB к её SVG-ссылке. Многоцветные иконки сохраняют исходные цвета.
Другие категории иконок
Эмодзи (11) Флаги и карты (12) Логотипы (18) Программирование (11) Тематические (9) Интерфейс 16px / 32px (18) Интерфейс 24px (65) Многоцветный интерфейс (12) Интерфейс, другие сетки (35) Архив без поддержки (30) Без категории (16)