ICONYZ
Русский

Ultimate color icons

streamline-ultimate-color · 998 иконок · автор: Streamline · CC-BY-4.0 · многоцветные · сетка 24 px · Обновлено

Ultimate color icons — бесплатный набор иконок с открытым кодом: 998 SVG-иконок от Streamline, выпущенный под лицензией CC BY 4.0. Иконки многоцветные, поэтому сохраняют свои цвета в любом размере. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.

Дизайн-спецификация: Ultimate color icons

  • контур и заливка
  • многоцветные
  • скруглённый

Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.

Холст24 × 24
viewBox0 0 24 24
Область рисования23 × 23, отступ 0.5
Стиль рисованияСочетание контура и заливки
Толщина обводки1
Концы линийСкруглённые
Соединения линийСкруглённые
Радиус скругления1
ЦветаОколо 4 цветов на иконку
КоординатыДо 3 знаков после запятой
Прямые линии68% горизонтальные или вертикальные, 13% под 45°
Кривые56% команд рисования
Симметрия40% иконок симметричны слева направо
Элементов на иконку6.1
Команд рисования на иконку41

Измерено по 62 иконкам набора.

Генерация иконок с помощью ИИ

Лицензия разрешает создавать новые иконки на основе этого набора.

  • Укажите авторов оригинала.

Строка атрибуции: Based on Ultimate color icons by Streamline, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/

Стайлгайд для промпта LLM (на английском)

Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.

You draw new icons for the "Ultimate color icons" icon set (Iconify prefix "streamline-ultimate-color") by Streamline.
Style: mixed outline and fill, multicolor, rounded.

Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 23x23 live area: about 0.5 units of padding on every side (never less than 0.29).
- A typical icon's bounding box covers 85% of the canvas.

Drawing
- Icons mix strokes and filled shapes (mixed 92%, stroke 6%, fill 2%).
- stroke-width="1".
- stroke-linecap="round", stroke-linejoin="round".
- Wrap the shapes in <g fill="none">, as 92% of the set does.
- Round corners with a radius of about 1.

Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 68% horizontal or vertical, 13% at 45 degrees.
- About 56% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (40% of icons are symmetric).
- Keep it simple: about 6 elements and 41 drawing commands per icon.
- Elements used by the set: path, g, clippath, defs, mask.

Color
- Multicolor, about 4 colors per icon. Use this palette: #191919, #e3e3e3, #66e1ff, #ffef5e, #ffffff, #c2f3ff, #ff808c, #fff9bf, gray, #ffbfc5, #ffdda1, #b2b2b2.

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).
Страница 1 из 11
Иконка ab-testing-monitors
ab-testing-monitors
Иконка accounting-bill-stack-1
accounting-bill-stack-1
Иконка accounting-calculator-1
accounting-calculator-1
Иконка accounting-coins
accounting-coins
Иконка add-circle-bold
add-circle-bold
Иконка adobe-logo
adobe-logo
Иконка ads-window
ads-window
Иконка adventure-car-truck-1
adventure-car-truck-1
Иконка aircraft-chopper-1
aircraft-chopper-1
Иконка aircraft-hot-air-balloon-2
aircraft-hot-air-balloon-2
Иконка airplane-mode
airplane-mode
Иконка alarm-bell-check-1
alarm-bell-check-1
Иконка alarm-bell-ring
alarm-bell-ring
Иконка alarm-bell-sleep-1
alarm-bell-sleep-1
Иконка align-center
align-center
Иконка align-middle
align-middle
Иконка align-top
align-top
Иконка allowances-no-photos
allowances-no-photos
Иконка allowances-no-talking
allowances-no-talking
Иконка allowances-smoking
allowances-smoking
Иконка amazon-logo-1
amazon-logo-1
Иконка amazon-web-services-logo
amazon-web-services-logo
Иконка ambulance-call
ambulance-call
Иконка american-football-helmet
american-football-helmet
Иконка amusement-park-balloon
amusement-park-balloon
Иконка amusement-park-castle
amusement-park-castle
Иконка amusement-park-electric-cars
amusement-park-electric-cars
Иконка amusement-park-ferris-wheel
amusement-park-ferris-wheel
Иконка analytics-bars-3d
analytics-bars-3d
Иконка analytics-board-graph-line
analytics-board-graph-line
Иконка analytics-graph-lines
analytics-graph-lines
Иконка analytics-mountain
analytics-mountain
Иконка analytics-net
analytics-net
Иконка analytics-pie-2
analytics-pie-2
Иконка android-1
android-1
Иконка animal-products-egg
animal-products-egg
Иконка antenna
antenna
Иконка app-window-bookmark
app-window-bookmark
Иконка app-window-clock
app-window-clock
Иконка app-window-cloud
app-window-cloud
Иконка app-window-code
app-window-code
Иконка app-window-pie-chart
app-window-pie-chart
Иконка app-window-text
app-window-text
Иконка app-window-two
app-window-two
Иконка apple-logo
apple-logo
Иконка archive-books
archive-books
Иконка archive-locker
archive-locker
Иконка arrange-letter
arrange-letter
Иконка arrange-number
arrange-number
Иконка arrow-button-circle-left
arrow-button-circle-left
Иконка arrow-button-right-1
arrow-button-right-1
Иконка arrow-button-up
arrow-button-up
Иконка arrow-dot-corner-left-1
arrow-dot-corner-left-1
Иконка arrow-double-down-1
arrow-double-down-1
Иконка arrow-double-up
arrow-double-up
Иконка arrow-down-2
arrow-down-2
Иконка arrow-rectangle-down-2
arrow-rectangle-down-2
Иконка arrow-right
arrow-right
Иконка arrow-thick-circle-left-1
arrow-thick-circle-left-1
Иконка arrow-thick-left-3
arrow-thick-left-3
Иконка arrow-thick-right-bottom-corner-3
arrow-thick-right-bottom-corner-3
Иконка arrow-thick-up-4
arrow-thick-up-4
Иконка astronomy-planet-ring
astronomy-planet-ring
Иконка athletics-javelin-throwing
athletics-javelin-throwing
Иконка athletics-running-1
athletics-running-1
Иконка athletics-team-running
athletics-team-running
Иконка ati-logo
ati-logo
Иконка attachment
attachment
Иконка audio-file
audio-file
Иконка audio-file-mp3
audio-file-mp3
Иконка audio-file-sync
audio-file-sync
Иконка award-badge-star
award-badge-star
Иконка award-medal-4
award-medal-4
Иконка award-ribbon-star-1
award-ribbon-star-1
Иконка award-trophy-1
award-trophy-1
Иконка bandage-leg
bandage-leg
Иконка barbecue-grill
barbecue-grill
Иконка barcode
barcode
Иконка baseball-bat-ball
baseball-bat-ball
Иконка beacon-wireless-remote
beacon-wireless-remote
Иконка beer-glass
beer-glass
Иконка beer-opener-1
beer-opener-1
Иконка behance-logo-1
behance-logo-1
Иконка bicycle
bicycle
Иконка bin-1
bin-1
Иконка bing-logo
bing-logo
Иконка binocular
binocular
Иконка blackberry-logo
blackberry-logo
Иконка blogger-logo
blogger-logo
Иконка blood-drop
blood-drop
Иконка blood-drops-positive
blood-drops-positive
Иконка bluetooth-transfer
bluetooth-transfer
Иконка board-game-dice-1
board-game-dice-1
Иконка board-game-dice-2
board-game-dice-2
Иконка board-game-jenga
board-game-jenga
Иконка board-game-ludo
board-game-ludo

О наборе Ultimate color icons

Набор разделён на 31 категорию: основы интерфейса (148), бизнес и продукты (50), компьютеры, устройства и электроника (50) и здоровье и красота (50).

Популярные Ultimate color icons: touch up, like, download bottom, power button, move expand vertical и keyboard asterisk 3.

Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Ultimate color icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.

Ultimate color icons по категориям

Как использовать Ultimate color icons

Все иконки на этой странице работают в любом фреймворке. В примерах используется streamline-ultimate-color:touch-up; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.

React

import { Icon } from "@iconify/react";

<Icon icon="streamline-ultimate-color:touch-up" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="streamline-ultimate-color:touch-up" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="streamline-ultimate-color:touch-up" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[streamline-ultimate-color--touch-up]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/streamline-ultimate-color -->
<div class="i-streamline-ultimate-color:touch-up"></div>

Веб-компонент

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="streamline-ultimate-color:touch-up"></iconify-icon>

Изображение HTML

<img src="https://iconyz.com/api/public/svg/streamline-ultimate-color/touch-up.svg" alt="Иконка Touch Up" width="24" height="24">

Вопросы и ответы: Ultimate color icons

Можно ли бесплатно использовать Ultimate color icons в коммерческих проектах?

Да. Ultimate color icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.

Сколько иконок в наборе Ultimate color icons?

В наборе Ultimate color icons 998 иконок в 31 категории.

Какая лицензия у набора Ultimate color icons?

Ultimate color icons распространяются по лицензии CC BY 4.0. Полный текст лицензии доступен по адресу https://creativecommons.org/licenses/by/4.0/.

Кто создал Ultimate color icons?

Автор набора Ultimate color icons — Streamline.

Как использовать Ultimate color icons в React?

Установите @iconify/react и отрисуйте <Icon icon="streamline-ultimate-color:touch-up" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.

Какого размера Ultimate color icons?

Ultimate color icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.

Похожие наборы