Иконки Solar
solar · 8 778 иконок · автор: 480 Design · CC-BY-4.0 · одноцветные · сетка 24 px · Обновлено
Иконки Solar — бесплатный набор иконок с открытым кодом: 8 778 SVG-иконок от 480 Design, выпущенный под лицензией CC BY 4.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Иконки Solar
- контур и заливка
- двухтоновый
- монохромный
- скруглённый
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 21.5 × 21.5, отступ 1.25 |
| Стиль рисования | Сочетание контура и заливки |
| Толщина обводки | 1.5 |
| Концы линий | Скруглённые |
| Соединения линий | Острые |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Двухтоновые слои | 38% иконок |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 56% горизонтальные или вертикальные, 13% под 45° |
| Кривые | 71% команд рисования |
| Симметрия | 37% иконок симметричны слева направо |
| Элементов на иконку | 3.2 |
| Команд рисования на иконку | 33 |
Измерено по 60 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Solar by 480 Design, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Solar" icon set (Iconify prefix "solar") by 480 Design.
Style: mixed outline and fill, duotone, monochrome, rounded.
Iconify describes the set as: Precise Shapes, Has Padding, Uses Stroke.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 21.5x21.5 live area: about 1.25 units of padding on every side (never less than 0.85).
- A typical icon's bounding box covers 73% of the canvas.
Drawing
- Icons mix strokes and filled shapes (fill 53%, stroke 47%).
- stroke-width="1.5" (widths used: 1.5 47%, 1 2%).
- stroke-linecap="round", stroke-linejoin="miter".
- Use fill-rule="evenodd" for holes.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 56% horizontal or vertical, 13% at 45 degrees.
- About 71% of drawing commands are curves or arcs.
- Keep it simple: about 3 elements and 33 drawing commands per icon.
- Elements used by the set: path, g, circle, ellipse.
Color
- Monochrome: paint with currentColor only, never a fixed color.
- Duotone: add a second layer of the same color at opacity .3 to .4 (38% 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).
О наборе Иконки Solar
Набор разделён на 37 категорий, в том числе интерфейс (944), видео (636), устройства (546) и стрелки (444).
Популярные Иконки Solar: magnifier zoom out broken, armchair 2 bold duotone, traffic economy line duotone, user rounded bold duotone, soundwave linear и hamburger menu broken.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки Solar выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Иконки Solar по категориям
Иконки Интерфейс (944)
Иконки Видео (636)
Иконки Устройства (546)
Иконки Стрелки (444)
Иконки Стрелки действий (428)
Иконки Сообщения (396)
Иконки ИТ (306)
Иконки Безопасность (288)
Иконки Спорт (246)
Иконки Карта (222)
Иконки Списки (216)
Иконки Форматирование текста (216)
Как использовать Иконки Solar
Все иконки на этой странице работают в любом фреймворке. В примерах используется solar:magnifier-zoom-out-broken; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="solar:magnifier-zoom-out-broken" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="solar:magnifier-zoom-out-broken" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="solar:magnifier-zoom-out-broken" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--magnifier-zoom-out-broken]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:magnifier-zoom-out-broken"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="solar:magnifier-zoom-out-broken"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/solar/magnifier-zoom-out-broken.svg" alt="Иконка Magnifier Zoom Out Broken" width="24" height="24">Вопросы и ответы: Иконки Solar
Можно ли бесплатно использовать Иконки Solar в коммерческих проектах?
Да. Иконки Solar выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Сколько иконок в наборе Иконки Solar?
В наборе Иконки Solar 8 778 иконок в 37 категориях.
Какая лицензия у набора Иконки Solar?
Иконки Solar распространяются по лицензии CC BY 4.0. Полный текст лицензии доступен по адресу https://creativecommons.org/licenses/by/4.0/.
Кто создал Иконки Solar?
Автор набора Иконки Solar — 480 Design.
Как использовать Иконки Solar в React?
Установите @iconify/react и отрисуйте <Icon icon="solar:magnifier-zoom-out-broken" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Иконки Solar?
Иконки Solar нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.