Google Material Icons
ic · 10 955 иконок · автор: Material Design Authors · Apache-2.0 · одноцветные · сетка 24 px · Обновлено
Google Material Icons — бесплатный набор иконок с открытым кодом: 10 955 SVG-иконок от Material Design Authors, выпущенный под лицензией Apache 2.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Google Material Icons
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 20 × 20, отступ 2 |
| Стиль рисования | Залитые фигуры |
| Радиус скругления | 1 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 73% горизонтальные или вертикальные, 15% под 45° |
| Кривые | 37% команд рисования |
| Симметрия | 41% иконок симметричны слева направо |
| Элементов на иконку | 1.6 |
| Команд рисования на иконку | 24 |
Измерено по 64 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Google Material Icons by Material Design Authors, licensed under Apache 2.0. https://github.com/material-icons/material-icons/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Google Material Icons" icon set (Iconify prefix "ic") by Material Design Authors.
Style: filled, solid, monochrome.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 20x20 live area: about 2 units of padding on every side (never less than 0.15).
- A typical icon's bounding box covers 61% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
- Round corners with a radius of about 1.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 73% horizontal or vertical, 15% at 45 degrees.
- About 37% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (41% of icons are symmetric).
- Keep it simple: about 2 elements and 24 drawing commands per icon.
- Elements used by the set: path, circle.
Color
- Monochrome: paint with currentColor only, never a fixed color.
Output
- Reply with one complete <svg> element and nothing else: no comments, <title>, ids or scripts.
- Match the examples: reuse their shapes for shared parts (arrow heads, people, documents, badges).
О наборе Google Material Icons
Набор разделён на 20 категорий, в том числе действие (2 290), изображение (1 230), устройство (1 100) и карты (1 050).
Популярные Google Material Icons: baseline notifications active, outline person outline, twotone videocam off, sharp flash on, baseline volume mute и twotone battery 20.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Google Material Icons выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Google Material Icons по категориям
Иконки Действие (2 290)
Иконки Изображение (1 230)
Иконки Устройство (1 100)
Иконки Карты (1 050)
Иконки Социальное (1 025)
Иконки Аудио и видео (630)
Иконки Редактор (610)
Иконки Связь (495)
Иконки Контент (415)
Иконки Места (415)
Иконки Оборудование (390)
Иконки Уведомление (350)
Как использовать Google Material Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется ic:baseline-notifications-active; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="ic:baseline-notifications-active" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="ic:baseline-notifications-active" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="ic:baseline-notifications-active" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[ic--baseline-notifications-active]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/ic -->
<div class="i-ic:baseline-notifications-active"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ic:baseline-notifications-active"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/ic/baseline-notifications-active.svg" alt="Иконка Baseline Notifications Active" width="24" height="24">Вопросы и ответы: Google Material Icons
Можно ли бесплатно использовать Google Material Icons в коммерческих проектах?
Да. Google Material Icons выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Google Material Icons?
В наборе Google Material Icons 10 955 иконок в 20 категориях.
Какая лицензия у набора Google Material Icons?
Google Material Icons распространяются по лицензии Apache 2.0. Полный текст лицензии доступен по адресу https://github.com/material-icons/material-icons/blob/master/LICENSE.
Кто создал Google Material Icons?
Автор набора Google Material Icons — Material Design Authors.
Как использовать Google Material Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="ic:baseline-notifications-active" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Google Material Icons?
Google Material Icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.