Бесплатные иконки

Как менять цвет svg-иконки через CSS

Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.

Научимся это делать на примере иконки «ВКонтакте»:

Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:

Да, это не ошибка, так в HTML вставляют небольшие svg-картинки. Для больших целесообразнее подключать отдельный файл, который будет кэшироваться браузером. Здесь мы не будем в это углубляться.

Обратите внимание на тег (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.. Строка с данными задаётся атрибутом d тега

Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс: hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).

Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.

И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.

Наборы готовых иконок

iconmelon.com

Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью .

Upd. от 4.07.2020: к сожалению, сайт давно не работает.

От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.

Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.

flaticon.com

Большая коллекция, иконки удобно поделены на категории. Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.

Логотипы и favicon

Небольшая справка: favicon — значок, который отображается рядом с названием сайта на вкладке в браузере. Также может отображаться в поисковой выдаче.

Logomakr

Это конструктор, в котором вы можете создать собственный логотип. Работать в нем легко, инструментов немного, в целом он похож на сильно упрощенный Photoshop. Отлично подойдет для создания какого-нибудь простого логотипа или фавикона. Помимо основных фигур и текста, еще есть большой каталог с различными рисунками-иконками, которые можно использовать в своем логотипе.

Online Logomaker

Это более продвинутый по функциям конструктор. Здесь можно добавлять разноцветные символы; большой выбор латинских шрифтов, но и для кириллицы есть несколько вариантов. Помимо логотипа, можно создать визитку.

Есть перевод на русский язык, который очень похож на машинный, но в целом понятен.

Canva

Известный в кругах дизайнеров и SMM-щиков проект, который часто используют для создания красивых изображений. Не все элементы бесплатны — часть из них можно купить отдельно либо приобрести подписку за 12,95 долларов в месяц. Но перед этим есть бесплатный 30-дневный тестовый период.

Designimo

Здесь нужно просто ввести название своей компании (и слоган, если есть) — и онлайн-сервис автоматически сгенерирует несколько сотен возможных логотипов. Выбор разнообразен: есть абстрактные варианты, есть тематические — медицина, сфера красоты и ухода за собой, спорт, любовь, праздники… После выбора подходящего логотипа его можно доработать: изменить цвет и положение элементов, развернуть, сделать больше или меньше.

Организация иконок

Перед тем как скачивать иконки, установите органайзер. Я честно, скажу, не знаю как раньше жил без него. Сегодня это обязательный инструмент дизайнера.

Совет: Когда библиотек становится слишком много на компьютере, то лучших их как-то организовать. Это куда удобнее, чем постоянно искать в папках или посещать веб-сайты по вкладкам. После скачивания сразу добавляйте иконки в органайзер.

Рекомендую хорошее и бесплатное приложение для Mac и Windows, которое позволяет добавлять бесплатные библиотеки в приложение и удобно работать с ними. Можно просматривать сразу иконки, использовать поиск, настраивать иконки, экспортировать в разных форматах.

Иконки

Captain Icon

Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.

Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.

Ego

Иконки представлены в синих и серых оттенках.

Endless Icons

Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.

Все иконки можно использовать как в личных, так и в коммерческих проектах.

Flaticon

Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).

Flaticon дает возможность редактировать свои иконки — перед загрузкой вы можете поменять их цвет. Это очень удобно, можно сделать иконки в цветовой палитре своего сайта.

Icofinder

Еще один сайт с большим количеством самых разных иконок. Здесь их почти три миллиона. Часть из них платные, часть можно скачать и использовать бесплатно. Иконки различаются по цвету и гамме, поэтому здесь можно найти подходящие элементы практически для любого сайта.

Технические характеристики иконок для Android и iOS

Существует два основных типа иконок — для систем Android и iOS. Хотя на первый взгляд они очень похожи, но отличаются множеством технических нюансов, которые стоит учитывать при разработке.

	Google Play Store (Android)	App Store (iOS
Размер	512 px × 512 px	iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x)
Формат	32-разрядный PNG	PNG
Цветовое пространство	sRGB	sRGB или P3
Форма	Полный квадрат. Google Play автоматически скругляет углы (радиус скругления — 20% от размера) и добавляет тени	Квадрат без закругленных углов и теней

Общие иконки для программ

Как мы уже сказали в начале, кроме иллюстраций реальных программных продуктов могут встречаться картинки «общего характера». Они применяются при обозначения определенного софта с точки зрения его функций, например: калькулятор, часы/таймер, таблицы, документы, записная книжка, утилита и т.п.

Точно также разработчики могут скачать иконки для приложений дабы использовать их непосредственно внутри ПО (в пользовательском интерфейсе). Все изображения одинаково хорошо подходят в том числе тематическим сервисам и обычным веб-проектам. Они являются неплохим дополнением статьи про бесплатные пиктограммы для сайтов.

Coquette Part 3

Farm-Fresh Web Icons

В данном скачиваемом файле найдете почти 4тысяч мини-картинок на любой вкус (что заметно по скриншоту выше). По размерам здесь будут файлы 16×16 и 32×32 пикселей.

Niome PNGs

PixeloPhilia2

Open Icon Library

Открытая библиотека бесплатных иконок для приложений в SVG (около 2500шт.), PNG (7500шт.), XPM, ICO, ICNS. Всего она содержит около 10тысяч объектов. Выбор максимально широкий.

300+ Free Flat Color Icons

MinIcons by Kyo-tux

680 Inverticons MiniFree

Это работа взята с сайта Icojam, о котором мы когда-то писали. Там можно найти супер классные красочные иконки для любых задач, в том числе и оформления софта/веб-сервисов. Просто невероятный архив по своим объемам.

Reality by kidaubis

24×24 Free Application Icons

48 Flat Designer Icons

Blue Whales 

…В принципе, материалов в данном посте могли опубликовать и больше, но лучше всего их искать по какой-то конкретной тематике, которая вам нужна: соц.сети, компьютеры, папки, iOS и т.п. Часть из них представлена в тематических наборах иконок нашего блога. Напоследок приведем парочку премиальных элементов:

Vector Flat Colored Pictograms

Colorful Program and Interface Icons

WebFile Labels Set

180 Modern Flat Iconset

Web icons

Universal Web/Mobile Icons

Итого получилось более 40 ссылок для скачивания, хотя их в интернете еще очень-очень много. Фишка в том, что сейчас значительная часть материалов содержится в специальных архивах иконок таких как Flaticon, Softicons, Iconarchive, Icons8. Искать графику там проще + они предлагают интересные фишки по ее редактированию и не только.

P.S. Постовой. Если требуется заказать рекламу и раскрутку сайта то в компании Aweb вам помогут решить эти задачи максимально качественно.

Iconset — must have.

Iconset — это лучший на сегодняшний день органайзер иконок для Mac и Windows.  Бесплатное, кроссплатформенное и быстрое приложение для управления иконками SVG для дизайнеров, разработчиков и продуктовых команд.

️ Скачать органайзер иконок: https://iconset.io

Лучший органайзер иконок для Mac и Windows

Приложение все делает за вас: просто перетащите папку с иконками и получите готовую структуру. Управляйте настройками, удобно экспортируйте в разных форматах.

Упорядочивайте иконки и ищите их в одном месте

Организуя иконки с помощью наборов, тегов и групп в приложении, вы и ваша команда со временем получите хорошо организованную библиотеку иконок.

Используйте Iconset с любым дизайнерским приложением

Перетаскивайте иконки из Iconset прямо в свой любимый инструмент! Этот универсальный органайзер для иконок больше не требует установки плагинов или расширений.

Синхронизируйте значки на разных устройствах в реальном времени

Iconset поддерживает любые облачные сервисы, такие как Dropbox, OneDrive или Box, для включения иконок, которыми вы делитесь с вашей командой.

Не волнуйтесь, здесь нет ежемесячной подписки.

Публикуйте и делитесь своими наборами значков или пакетами значков

Ваши иконки можно экспортировать в виде файла .set, и люди могут использовать приложение для управления иконками, чтобы импортировать его одним щелчком мыши.

Установка через JS

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе

let icon = ‘<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \
<circle cx=»12″ cy=»12″ r=»10″/> \
</svg>’; // наша иконка
let svgimg = document.querySelectorAll(«.happyface»); // находим все элементы с классом happyface
for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам
svgimg.innerHTML = icon; // вставляем в них иконку
}

1 2 3 4 5 6 7 8 9 10

let icon='<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\     <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \ <line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \ <line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \ <circle cx=»12″ cy=»12″ r=»10″/> \ </svg>’;// наша иконка let svgimg=document.querySelectorAll(«.happyface»);// находим все элементы с классом happyface for(leti=;i<svgimg.length;i++){// проходим циклом по всем элементам svgimgi.innerHTML=icon;// вставляем в них иконку }

И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.

<div class=»happyface»></div>

1	<div class=»happyface»></div>

На jQuery код получается проще:

let icon = ‘…’; // наша иконка
$(«.happyface»).html(icon); // вставляем иконку в элемент с классом happyface

1 2	let icon=’…’;// наша иконка $(«.happyface»).html(icon);// вставляем иконку в элемент с классом happyface

Усложняем задачу

Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:

Код для кнопки с иконкой лупы будет таким:

Проблема здесь в том, что внутри svg-иконки два разных тега:

• <rect> (прямоугольник — ручка лупы)
• и <circle> (круг — ободок лупы).

Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).

Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:

Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.

Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.

Спрайт или иконочный шрифт?

Шрифт — удобная альтернатива спрайту. Не надо заморачиваться сеткой и расположением иконок, удобно добавлять новые символы, хотя для этого требуются дополнительные инструменты.

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.

Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:

1. Выберите иконки из набора и/или загрузите свои.
2. Кликните внизу кнопку Font.
3. На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.

Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах.
Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).

CSS-tricks, кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.

Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.

Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.

Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

Как существуют способы вставки SVG на страницу?

Отображение иконок в браузерах без поддержки SVG

В данный момент самый удобный и надежный способ вставки — в виде спрайта.

Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:

Для старых Опер можно использовать такой селектор:

Таким образом можно добиться, чтобы иконки у пользователей с разными браузерами выглядели примерно одинаково.

Из существующих способов вставки иконок мне больше всего нравится шрифт. Он был бы идеальным, если бы не проблемы с поддержкой.
мне не нравится смешиванием разметки и оформления, хотя радует доступность для CSS и возможность добавить и .
Есть ещё один очень хороший, но плохо поддерживаемый способ, но это тема для отдельного поста.

UPD: Большое спасибо Роме Комарову за дополненния к тексту.

UPD от 04.04.14:

1. Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
2. Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/>
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/>
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/>
<circle cx=»12″ cy=»12″ r=»10″/>
</svg>

1 2 3 4 5 6

<svg width=»128″height=»128″role=»img»xmlns=»http://www.w3.org/2000/svg»viewBox=»0 0 24 24″stroke=»#337AB7″stroke-width=»2″stroke-linecap=»square»stroke-linejoin=»miter»fill=»none»color=»#337AB7″> <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> <line stroke-linecap=»round»x1=»9″y1=»9″x2=»9″y2=»9″/> <line stroke-linecap=»round»x1=»15″y1=»9″x2=»15″y2=»9″/> <circle cx=»12″cy=»12″r=»10″/> </svg>

Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.

Не используйте слова

Это самая больная тема всех времен. Только в очень редких случаях в иконках допускаются слова. Я считаю, что если дизайнер прибегает к использованию слов, значит он не в полной мере использует свой арсенал образов.

Слова и изображения — это совершенно разные инструменты представления. Иконка должна служить графическим представлением приложения, а если в ней намешаны слова и образы, то результат получается перегруженным и расфокусированным — и пользователю сложнее уловить идею такой иконки. Ну неужели не нашлось лучшего способа изобразить идею приложения, чем просто сказать словами? Когда я вижу иконки со словами, мне всегда кажется, что дизайнер просто не смог передать свою задумку более понятно.

Для начала

Проектирование одного единственного предмета граф. дизайна, с которым пользователи будут взаимодействовать при каждом использовании продукта, может показаться пугающей задачей. Красивая, узнаваемая и запоминающаяся иконка может сильно повлиять на популярность и успех приложения. Но как именно спроектировать «хорошую» иконку приложения? Что это вообще означает? Не бойтесь, я собрал несколько советов, которые помогут ответить на эти вопросы. Эта статья — ваше руководство по проектированию классных иконок.

Что такое «иконка приложения»?

Первое, что вы должны понять, принимаясь за проектирование — это что такое «иконка приложения» и какую задачу она выполняет. Иконка приложения — это визуальный якорь вашего продукта. Можете рассматривать иконку как небольшой элемент брендинга, который должен не просто красиво выглядеть и выделяться, но еще и предавать основную суть вашего приложения.

Словом «логотип» сегодня разбрасываются очень легкомысленно. Иконка приложения — это не логотип. Хотя иконки и обладают некоторыми «брендинговыми» качествами, для них существует множество особых ограничений. Дизайнер должен понимать разницу: логотип — это масштабируемый векторный элемент брендинга, который используется на бланках и рекламных щитах. Иконки — обычно растровые изображения квадратной формы, которые подстраиваются под конкретные размеры и определенные контексты использования. Так что между логотипами и иконками множество различий: в подходе к работе, в инструментах, в процессе проектирования и, следовательно, в критериях успешности.

В комплект входят иконки разных размеров. Этот шаблон можно скачать на appicontemplate.com

С практической точки зрения, под иконкой приложения понимается комплект из PNG-файлов разных размеров — от небольших (29х29) и до крупных (1024х1024) — которые нужно связать с приложением. Операционная система будет использовать этот комплект иконок в различных контекстах: в App Store и Google Play, на панели настроек устройства и на домашнем экране.

Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.

Уникальность

Приложения в App Store в категории “Производительность” — это отличный пример отсутствия уникальности в дизайне.

Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!

Ваша иконка будет соревноваться за внимание пользователя с другими иконками — и оригинальный дизайн может стать отличным преимуществом

• Изучите, что делают другие дизайнеры в вашей нише, а потом попробуйте пойти другим путем. Проведите хорошее исследование — миру не нужна еще одна иконка с галочкой.
• Если вы стремитесь к уникальности, простой глиф на одноцветном фоне — это сомнительная стратегия. Поиграйте с разными цветами и композициями и поставьте себе задачу найти новые, интересные метафоры.
• Цвет — это отличный способ по-новому представить старую концепцию (хотя многие упускают его из виду).

Не важно, какой стиль дизайна вы предпочитаете: работа над уникальностью — это отличное упражнение, которое поможет вам найти новые идеи

Согласованность

Когда иконка согласуется с интерфейсом, это визуально усиливает идею вашего приложения.

Важно также добиться согласованности между процессом взаимодействия с иконкой и процессом взаимодействия с приложением. Мне кажется, что хорошая иконка — это продолжение идеи приложения

Если иконка и интерфейс будут согласованы, приложение лучше запомнится пользователю

Мне кажется, что хорошая иконка — это продолжение идеи приложения. Если иконка и интерфейс будут согласованы, приложение лучше запомнится пользователю.

Короче говоря, если ваша иконка гармонично дополняет идею, функциональность и дизайн приложения — можете считать это большой победой.

• Один из способов добиться согласованности между приложением и иконкой — это придерживаться одной цветовой палитры и использовать схожий “язык дизайна”. Например, зеленый интерфейс можно усилить зеленой иконкой.
• Следующий способ не всегда возможен, но все же: попробуйте использовать в дизайне иконки символы, напрямую связанные с функциональностью приложения.

Best Fun Icon Packs

1. Belle UI

Belle UI — это один из немногих наборов иконок, которые приносят иконки в форме сквирлов, которые на самом деле выглядят хорошо . В приложении представлено более 1400 значков, выполненных с использованием векторной графики, поэтому они будут хорошо смотреться на любом смартфоне независимо от размера. Как и другие наборы значков, он также имеет собственный набор обоев, благодаря которым значки приложений выделяются еще больше. Я действительно люблю этот набор значков, и вы обязательно должны попробовать этот.

Установить: бесплатно

2. Наксос Таз

Naxos Taz имеет один из самых уникальных наборов иконок, которые я когда-либо видел в пакете иконок. Иконки красочные и не соответствуют ни одному дизайну, вместо этого они имеют дизайн свободной формы, который выглядит действительно красиво. Существует более 2200 иконок, которые охватывают практически все популярные приложения. Есть также инструмент для запроса отсутствующих значков, а также поддержка поиска значков, обоев и динамических календарей. Это один из самых уникальных и красивых на данный момент бесплатных иконок в магазине Play Store.

Установить: бесплатно

3. Параллакс

Parallax — это отличный набор иконок, в котором присутствует мультяшный язык дизайна. Фон значков имеет форму изогнутой формы с яркими цветами, которая затем накладывается на значки приложений . На выбор предлагается более 2200 иконок, каждый из которых выглядит уникально. Другие функции включают маскировку значков для неподдерживаемых значков, отсутствующий запрос значков, обои и многое другое.

Установить: бесплатно

4. H2O

Пакет иконок H2O представляет собой дизайн, аналогичный иконке Parallax, с иконкой в ​​форме бриллианта с приглушенными цветами. Тем не менее, иконки здесь более плоские и красочные . Этот красочный набор значков дает вам возможность выбрать из более чем 3600 значков, которые вдохновлены минимальными значками ОС Hydrogen. Наконец, пакет значков также содержит множество персонализированных значков от Samsung, Huawei EMUI, Motorola и One Plus.

Установить: бесплатно

5. Супергерой

Вероятно, самый уникальный набор значков в этом списке — набор значков Супергероя, который переключает ваши обычные значки на значки супергероев. Хотя это, безусловно, затруднит поиск ваших приложений, но если вы любите супергероев, это, безусловно, может помочь вам в персонализации вашего устройства. Иконки круглые и имеют плоский дизайн, который хорошо смотрится на любых обоях

Обращаем ваше внимание на то, что, поскольку нет заранее заданных настроек значков и всего двадцать с чем-то значков, вам придется вручную редактировать и устанавливать значки супергероев

Установить: бесплатно

6. UX 11

Последний забавный пакет иконок в этом списке — пакет иконок UX 11, который переносит иконографии iOS 11 на ваше устройство Android. Я знаю многих пользователей, которые предпочитают внешний вид значков приложений для iOS, и если вы один из них, это пакет значков для вас. Пакет i con содержит более 6000 иконок и 17 обоев в стиле iOS . Здесь особо нечего сказать. Если вы любите иконки iOS, попробуйте это.

Установить: бесплатно, с покупками в приложении

Заключение

Подытожим самые важные моменты, о которых стоит помнить при разработке значка мобильного приложения.

• Позаботьтесь о простоте, узнаваемости и уникальности.
• Следите за трендами, чтобы оставаться актуальным.
• Учитесь у топ-брендов. Например, из этого списка самых популярных мобильных приложений 2019 года:

1. Facebook Messenger
2. WhatsApp
3. TikTok
4. Instagram
5. SHAREit
6. Likee
7. Snapchat
8. Netflix
9. Spotify

Source: by Parmar Raj

Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.

Подведем итоги

Итак, давайте вкратце подытожим, каким должен быть дизайн иконок для вашего мобильного приложения:

Пленительная простота

Найдите элемент, который передает суть приложения, и облеките его в простую, запоминающуюся форму. Тщательно добавляйте детали. Слишком сложное содержание или форма иконки трудно различать, особенно при уменьшенных размерах.

Узнаваемость

Никто не будет анализировать икону, чтобы понять ее значение.

Например, изображение конверта традиционно используется в качестве иконки для почтового приложения, которое ассоциируется с почтой. Если вам нужна хорошая иконка, потратьте время на разработку привлекательной и понятной абстрактной эмблемы.

Никаких фотографий, скриншотов или элементов интерфейса.

Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии трудно разглядеть, когда они маленькие. Скриншоты не расскажут вам о цели приложения. Элементы интерфейса в пиктограмме вводят пользователя в заблуждение.

Проверьте значок на разных обоях

Люди выбирают разные обои для своих домашних экранов, поэтому, когда вы делаете иконку приложения, вы должны протестировать его на разных фонах.

Вот и все! Мы желаем Вам удачи и много красивых иконок для ваших приложений.