Почему одни иконки выглядят как набор, а другие — нет?
Иконки смотрятся вместе, когда у них общая сетка, толщина линий, форма углов, уровень детализации и палитра. Если смешивать иконки из разных паков или генерировать их по одной, обычно ломается хотя бы что-то из этого. Генератор наборов иконок рисует все иконки набора на одном листе по одному описанию стиля, так что все решения по рисовке принимаются сразу для всех. Потом каждая иконка вырезается и векторизуется в отдельный SVG.
Три наших примера, каждый — по одному списку: приложение кофейни в стиле «Линия», фитнес-трекер в стиле «Заливка» с острыми углами и приложение для путешествий в стиле «Плоские цвета» с тремя цветами.
Как сделать набор?
Откройте ИИ-генератор логотипов и выберите Иконки. Заголовок студии сменится на генератор наборов иконок.
- Перечислите иконки. Введите нужные предметы через запятую или по одному в строке:
чашка кофе, круассан, метка на карте, карта лояльности. Каждый станет отдельным чипом. В наборе может быть до 25 иконок. - Выберите, как их рисовать. Линия — контуры одной толщины, Заливка — сплошные фигуры одного цвета, Плоские цвета — сплошные фигуры до трех цветов, а Как на картинке повторяет стиль загруженного изображения (нужно войти в аккаунт) или уже сделанного вами логотипа либо набора иконок.
- Выберите углы. Скругленные или острые.
- Если хотите, опишите стиль словами. До 300 символов, например: «дружелюбно и минималистично, скругленные концы, немного теплоты ручной работы». Эта фраза попадает в рисовку каждой иконки набора.
- Отправьте. На каждой плитке видно, как иконка векторизуется, а затем — готовый SVG.
Цена нового набора указана на кнопке еще до отправки; за неудавшийся набор ничего не списывается.
Как исправить одну иконку, не перерисовывая остальные?
Используйте раунд. В раунде можно переделать иконки с пояснением («простой свернутый коврик, без текстуры») и добавить новые — до девяти изменений за раз. Переделанные и новые иконки рисуются в стиле набора, поэтому по-прежнему с ним совпадают. Первые раунды набора уже включены; если раунд стоит кредитов, это написано на его кнопке до запуска.
Если не так одна мелочь и перерисовывать незачем, откройте иконку в SVG-редакторе и измените контур или цвет напрямую.
Что входит в архив?
В ZIP три части:
| Папка | Что внутри |
|---|---|
svg/ |
по одному SVG на иконку, viewBox="0 0 24 24" с отступом 2 px |
png/ |
каждая иконка в виде прозрачного PNG в 16, 24, 32, 48, 64, 128, 256 и 512 px |
sprite.svg |
все иконки как <symbol> с id icon-NAME |
Маленькие PNG (до 48 px) отрисовываются в своем размере, поэтому линии попадают на целые пиксели, а не получаются уменьшением крупной картинки. Крупные размеры масштабируются из 512 px.
Как использовать иконки на сайте?
В наборах Линия и Заливка SVG рисуются цветом currentColor, так что иконка берет цвет окружающего текста. Перекрашивать ее можно через CSS, не правя файлы:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Если хотите, чтобы цвет был прописан в каждом файле, выберите в окне скачивания Как в дизайне. Набор в стиле Плоские цвета всегда сохраняет свои цвета. Декоративные иконки помечайте aria-hidden="true", а иконке, которая сама по себе служит кнопкой, дайте доступное имя.
Какие списки работают лучше всего?
Лучше всего работают конкретные существительные, которые можно нарисовать: «велосипед», «секундомер», «дверной замок». Абстрактные слова («рост», «доверие») не дают генератору ничего конкретного, поэтому сначала превратите их в предмет («росток», «рукопожатие»). Держите один уровень детализации на весь список: набор, где «точка» соседствует с «панорамой города», будет выглядеть неровно, как его ни рисуй.
Перед запуском проверьте каждую иконку в 16 и 24 px рядом с текстом, проверьте контраст на ваших фонах и убедитесь, что похожие иконки остаются различимыми. Генератор не проверяет, не похожа ли иконка на чужой знак, поэтому внимательно посмотрите на любую иконку, которую собираетесь зарегистрировать как товарный знак.