Иконки Material Symbols Light
material-symbols-light · 15 802 иконки · автор: Google · Apache-2.0 · одноцветные · сетка 24 px · Обновлено
Иконки Material Symbols Light — бесплатный набор иконок с открытым кодом: 15 802 SVG-иконки от Google, выпущенный под лицензией Apache 2.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Иконки Material Symbols Light
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 18.34 × 18.34, отступ 2.83 |
| Стиль рисования | Залитые фигуры |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 72% горизонтальные или вертикальные, 17% под 45° |
| Кривые | 61% команд рисования |
| Симметрия | 18% иконок симметричны слева направо |
| Элементов на иконку | 1 |
| Команд рисования на иконку | 44 |
Измерено по 61 иконке набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Material Symbols Light by Google, licensed under Apache 2.0. https://github.com/google/material-design-icons/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Material Symbols Light" icon set (Iconify prefix "material-symbols-light") by Google.
Style: filled, solid, monochrome.
Iconify describes the set as: Precise Shapes, Has Padding.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 18.34x18.34 live area: about 2.83 units of padding on every side (never less than 1).
- A typical icon's bounding box covers 48% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 72% horizontal or vertical, 17% at 45 degrees.
- About 61% of drawing commands are curves or arcs.
- Keep it simple: about 1 element and 44 drawing commands per icon.
- Elements used by the set: path.
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).
О наборе Иконки Material Symbols Light
Набор разделён на 18 категорий, в том числе текст (1 950), действия интерфейса (1 556), социальное (1 493) и оборудование (1 312).
Популярные Иконки Material Symbols Light: downloading, privacy tip, filter drama outline, assignment ind, monitoring и desktop access disabled outline sharp.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки Material Symbols Light выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Иконки Material Symbols Light по категориям
Иконки Текст (1 950)
Иконки Действия интерфейса (1 556)
Иконки Социальное (1 493)
Иконки Оборудование (1 312)
Иконки Изображения (1 255)
Иконки Действия (1 124)
Иконки Аудио и видео (1 013)
Иконки Android (938)
Иконки Общение (847)
Иконки Быт (823)
Иконки Карты (720)
Иконки Бизнес (665)
Как использовать Иконки Material Symbols Light
Все иконки на этой странице работают в любом фреймворке. В примерах используется material-symbols-light:downloading; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="material-symbols-light:downloading" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="material-symbols-light:downloading" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="material-symbols-light:downloading" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[material-symbols-light--downloading]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/material-symbols-light -->
<div class="i-material-symbols-light:downloading"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-symbols-light:downloading"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/material-symbols-light/downloading.svg" alt="Иконка Downloading" width="24" height="24">Вопросы и ответы: Иконки Material Symbols Light
Можно ли бесплатно использовать Иконки Material Symbols Light в коммерческих проектах?
Да. Иконки Material Symbols Light выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Иконки Material Symbols Light?
В наборе Иконки Material Symbols Light 15 802 иконки в 18 категориях.
Какая лицензия у набора Иконки Material Symbols Light?
Иконки Material Symbols Light распространяются по лицензии Apache 2.0. Полный текст лицензии доступен по адресу https://github.com/google/material-design-icons/blob/master/LICENSE.
Кто создал Иконки Material Symbols Light?
Автор набора Иконки Material Symbols Light — Google.
Как использовать Иконки Material Symbols Light в React?
Установите @iconify/react и отрисуйте <Icon icon="material-symbols-light:downloading" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Иконки Material Symbols Light?
Иконки Material Symbols Light нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.