Иконки Unicons Monochrome
uim · 298 иконок · автор: Iconscout · Apache-2.0 · одноцветные · сетка 24 px · Обновлено
Иконки Unicons Monochrome — бесплатный набор иконок с открытым кодом: 298 SVG-иконок от Iconscout, выпущенный под лицензией Apache 2.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Иконки Unicons Monochrome
- залитый
- двухтоновый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 20 × 20, отступ 2 |
| Стиль рисования | Залитые фигуры |
| Радиус скругления | 1 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Двухтоновые слои | 75% иконок |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 72% горизонтальные или вертикальные, 14% под 45° |
| Кривые | 51% команд рисования |
| Симметрия | 40% иконок симметричны слева направо |
| Элементов на иконку | 2.4 |
| Команд рисования на иконку | 23 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Unicons Monochrome by Iconscout, licensed under Apache 2.0. https://github.com/Iconscout/unicons/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Unicons Monochrome" icon set (Iconify prefix "uim") by Iconscout.
Style: filled, solid, duotone, monochrome.
Iconify describes the set as: Has Padding.
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 2).
- A typical icon's bounding box covers 69% 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: 72% horizontal or vertical, 14% at 45 degrees.
- About 51% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (40% of icons are symmetric).
- Keep it simple: about 2 elements and 23 drawing commands per icon.
- Elements used by the set: path, circle, rect.
Color
- Monochrome: paint with currentColor only, never a fixed color.
- Duotone: add a second layer of the same color at opacity .3 to .4 (75% of icons).
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).
О наборе Иконки Unicons Monochrome
Набор разделён на 13 категорий, в том числе логотипы брендов (87), пользовательский интерфейс (44), контент (34) и стрелки (27).
Популярные Иконки Unicons Monochrome: airplay, circle layer, lock access, comment alt message, web section и align.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки Unicons Monochrome выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Иконки Unicons Monochrome по категориям
Иконки Логотипы брендов (87)
Иконки Пользовательский интерфейс (44)
Иконки Контент (34)
Иконки Стрелки (27)
Иконки Инструменты дизайна (22)
Иконки Медицина (22)
Иконки Безопасность (10)
Иконки Облако и веб (9)
Иконки Бизнес (8)
Иконки Чат (8)
Иконки Время (8)
Иконки Фигура (7)
Как использовать Иконки Unicons Monochrome
Все иконки на этой странице работают в любом фреймворке. В примерах используется uim:airplay; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="uim:airplay" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="uim:airplay" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="uim:airplay" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[uim--airplay]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/uim -->
<div class="i-uim:airplay"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="uim:airplay"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/uim/airplay.svg" alt="Иконка Airplay" width="24" height="24">Вопросы и ответы: Иконки Unicons Monochrome
Можно ли бесплатно использовать Иконки Unicons Monochrome в коммерческих проектах?
Да. Иконки Unicons Monochrome выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Иконки Unicons Monochrome?
В наборе Иконки Unicons Monochrome 298 иконок в 13 категориях.
Какая лицензия у набора Иконки Unicons Monochrome?
Иконки Unicons Monochrome распространяются по лицензии Apache 2.0. Полный текст лицензии доступен по адресу https://github.com/Iconscout/unicons/blob/master/LICENSE.
Кто создал Иконки Unicons Monochrome?
Автор набора Иконки Unicons Monochrome — Iconscout.
Как использовать Иконки Unicons Monochrome в React?
Установите @iconify/react и отрисуйте <Icon icon="uim:airplay" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Иконки Unicons Monochrome?
Иконки Unicons Monochrome нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.