Иконки Material Design Iconic Font
zmdi · 777 иконок · автор: MDI Community · OFL-1.1 · одноцветные · Обновлено
Иконки Material Design Iconic Font — бесплатный набор иконок с открытым кодом: 777 SVG-иконок от MDI Community, выпущенный под лицензией Open Font License. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS.
Дизайн-спецификация: Иконки Material Design Iconic Font
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 384 × 384 · 25% иконок |
|---|---|
| viewBox | 0 0 384 384 |
| Область рисования | Весь холст, без отступов |
| Стиль рисования | Залитые фигуры |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | Целые единицы |
| Прямые линии | 78% горизонтальные или вертикальные, 11% под 45° |
| Кривые | 50% команд рисования |
| Симметрия | 43% иконок симметричны слева направо |
| Элементов на иконку | 1 |
| Команд рисования на иконку | 27 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
- Публикуйте производные иконки под той же лицензией (OFL-1.1).
Строка атрибуции: Based on Material Design Iconic Font by MDI Community, licensed under Open Font License.
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Material Design Iconic Font" icon set (Iconify prefix "zmdi") by MDI Community.
Style: filled, solid, monochrome.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 384">.
- Draw edge to edge: icons use the full canvas with no padding.
- A typical icon's bounding box covers 98% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
Geometry
- Put coordinates on whole units (83% are integers).
- Straight lines: 78% horizontal or vertical, 11% at 45 degrees.
- About 50% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (43% of icons are symmetric).
- Keep it simple: about 1 element and 27 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).
- The result is a derivative of Open Font License; it must be released under the same license.
О наборе Иконки Material Design Iconic Font
Популярные Иконки Material Design Iconic Font: alarm snooze, cloud off и library.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки Material Design Iconic Font выпущены под лицензией Open Font License, которая разрешает использование в личных и коммерческих проектах.
Как использовать Иконки Material Design Iconic Font
Все иконки на этой странице работают в любом фреймворке. В примерах используется zmdi:alarm-snooze; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="zmdi:alarm-snooze" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="zmdi:alarm-snooze" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="zmdi:alarm-snooze" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[zmdi--alarm-snooze]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/zmdi -->
<div class="i-zmdi:alarm-snooze"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="zmdi:alarm-snooze"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/zmdi/alarm-snooze.svg" alt="Иконка Alarm Snooze" width="24" height="24">Вопросы и ответы: Иконки Material Design Iconic Font
Можно ли бесплатно использовать Иконки Material Design Iconic Font в коммерческих проектах?
Да. Иконки Material Design Iconic Font выпущены под лицензией Open Font License, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Иконки Material Design Iconic Font?
В наборе Иконки Material Design Iconic Font 777 иконок.
Какая лицензия у набора Иконки Material Design Iconic Font?
Иконки Material Design Iconic Font распространяются по лицензии Open Font License.
Кто создал Иконки Material Design Iconic Font?
Автор набора Иконки Material Design Iconic Font — MDI Community.
Как использовать Иконки Material Design Iconic Font в React?
Установите @iconify/react и отрисуйте <Icon icon="zmdi:alarm-snooze" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.