Google Material Design Icons — 3600 бесплатных SVG-иконок для вашего следующего веб-проекта
Material Design Icons — это библиотека иконок с открытым исходным кодом от google, содержащая более 3600 svg-иконок в различных стилях. Перейдите на https://fonts.google.com/icons, найдите нужное имя иконки и подключите её в свой проект с помощью одной cdn-ссылки в теге header вашего html-файла.
Раньше я тратил большую часть времени, прося агента разместить там иконку, а он в ответ подсовывал то случайные эмодзи, то ужасные иконки. Но потом я понял, что у google есть библиотека иконок с открытым исходным кодом, которая существует уже много лет, но о ней почему-то никто толком не говорит, будто ею и пользоваться-то нельзя.
Material Design Icons — это официальная библиотека иконок от google. У них есть 2 типа иконок: Material Icons (старые, существуют ещё с 2014 года) и Material Symbols (более новые вариативные шрифтовые иконки, запущенные в 2022 году). Обе абсолютно бесплатны в использовании. Получить к ним доступ можно здесь: https://fonts.google.com/icons. Просто выберите категорию, стиль и размер иконки. Всего у них более 3600 иконок — от стрелок до галочек, погоды, транспорта, карт и так далее.
Исходники
google/material-design-icons
★ 53 634
Самый простой способ внедрить эти иконки в любой веб-проект — использовать cdn-ссылки от google. Всё, что нужно сделать, — добавить одну строку кода в проект, и вы сможете использовать все иконки, просто прописав их имя в любом html-элементе. Вам даже не нужно скачивать иконки или перетаскивать их. Если вы работаете над проектом на godot или unity, то можете скачать svg-файлы прямо из репозитория.
Как подключить Material Design Icons к проекту
- 1Открой fonts.google.com/icons в браузере
- 2Найди нужную иконку — через поиск или по категории
- 3Нажми на иконку → справа откроется панель с её именем (например 'search', 'favorite', 'home')
- 4Скопируй это имя — потом вставишь в HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">search</span>
Если вы хотите использовать новые Material Symbols, то можете менять насыщенность (weight), заливку (fill) и размер иконок с помощью css. Агент должен знать оба формата иконок, так что просто скажите ему, какой из них использовать.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined">favorite</span>
3600+ бесплатных иконок от Google в нескольких стилях — контурные, скруглённые, острые, двухтонные. Смотришь и копируешь имена на fonts.google.com/icons, подключаешь одним CDN-тегом в head. Лицензия Apache 2.0 — для любых проектов.
Источник: github.com
Бесплатный курс
Хватит читать про ИИ — начни строить с ним
Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.
Начать →▌ Гайды по теме
Автор
Евгений Арсентьев
PhD · CEO, digital health
Статьи · Свежие статьи