Для чего нужны иконки
Зачем нужны иконки?
Иконки и как их использовать в интерфейсе
Иконки нужны для ускорения восприятия информации. Давайте сразу посмотрим на примере. Это сайт программы для организации закладок. На экране показан функционал программы.
Дизайнер использовал иконки с привычными образами. Лупа — поиск. Земной шар — мультиязычность. Звёздочка — избранное. Все иконки на этом примере помогают легко считывать информацию.
Что будет, если их убрать? Отметьте, как изменилась скорость восприятия.
На первом примере достаточно окинуть взглядом страницу, чтобы понять функции продукта. Мы убрали иконки и теперь в каждое слово нужно вчитываться, чтобы что-то понять.
Так происходит потому, что у людей образное мышление. Если мы видим образ, нам проще понимать суть.
Но образы должны быть явные и привычные. Иначе ничего не выйдет. Смотрите пример.
Иконка с бирками — непонятно, как она относится к фиксированной цене. Иконка с копилкой никак не намекает на отсутствие скрытых комиссий. Деньги в руке еще и агрессивны. Так и говорят “Shut up and take my money”.
В этом блоке иконки использованы ради иконок. Они не доносят суть. Потому что преимущества очень расплывчатые и непонятные. Это скорее принципы работы. В таком случае лучше просто написать понятный текст из 3 предложений, чем использовать неуместные иконки.
«Как мы работаем» — в этом блоке описывается процесс работы. Иконки непонятны. И не нужны. Порядок лучше иллюстрировать числами и направлением (стрелочки, линии).
Еще один пример. Здесь всё еще хуже.
Здесь иконки ничего не передают. Абсолютно не помогают понимать суть. Но в этом случае, даже текст не доносит смысла. Он непонятен. Из-за этого не получилось подобрать иконки и влепили то, что было.
1. Иконки должны помогать восприятию.
2. Они должны передавать чёткие образы.
3. Используйте иконки там, где это уместно. Не лепите иконки ради иконок.
4. Если образ чёткий, а иконка не подходит, возможно текст сформулирован недостаточно точно.
Бесплатно:
1. Более 1 000 000 иконок от дизайнеров со всего мира — https://thenounproject.com/
2. Еще почти 2 000 000 иконок — https://www.iconfinder.com/
3. 57 000 плоских иконок. Можно выбирать стилистику и менять цвета — https://icons8.com/
4. 540 000 иконок — https://www.flaticon.com/
Эти 4 сервиса могут полностью закрыть потребность в иконках. А если хочется чего-то особенного, то посмотрите на платные иконки. Сайты, где за небольшие деньги можно купить хорошие иконки.
Иконки для сайта: какие бывают, зачем нужны и где их брать?
Иконки плавно и основательно стали обязательным атрибутом любого качественного сайта. Поговорим о том, какие бывают иконки, когда и в каких целях их стоит применять и где их брать.
Содержание
Какие бывают иконки?
В этом материале мы не станем рассматривать иконочные шрифты, а поговорим об иконках в формате изображений.
В зависимости от типа графики иконки делятся на:
Векторные (формат SVG).
Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.
Растровые (формат PNG).
Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.
Символьные (форматы шрифтов).
В веб-дизайне нередко применяются иконочные шрифты (например: FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.
Существуют основные следующие стили оформления иконок:
Иконка с одинаковым значением в разных стилях:
Зачем нужны иконки на сайте?
Как все мы помним из детства: любая книга интереснее, если в ней есть картинки. Сайтов это касается в значительно большей степени, ведь пользователи не столько читают контент веб-страниц, сколько просматривают, а иконки способствуют улучшению восприятия представленной информации.
Иконкам можно найти применение на любом сайте:
В дополнение к пунктам навигации.
Благодаря единому размеру, иконки в навигации способствуют скорейшему запоминанию каждого пункта. В меню сайта иконки могут полностью заменять текст в адаптивном дизайне или других случаях изменения интерфейса. Такой подход применяет в интерфейсе панели управления Joomla 4:
Для функциональных кнопок.
Не будем далеко ходить и вспомним интерфейс админки Joomla 3, в котором также активно применяются иконки для обозначения функциональных кнопок и не только их.
Для обозначения любого элемента контента.
Особенно это касается лендингов, где почти каждый элемент страницы сопровождается графическим объектом. В частности, иконки практически всегда применяются для блоков преимуществ и в призывах к действию:
Для обозначения мета-информации.
Иконками можно помечать любые мета-данные на веб-страницах: дату создания, изменения и публикации, имя автора, категорию, рейтинг, комментарии и т. д.
Во всех этих случаях можно применять иконки любого формата графики, но в первых трех чаще всего применяются именно иконочные шрифты, т. к. один шрифт может содержать весь необходимый набор иконок.
Где взять иконки для сайта?
Иконочные шрифты
Существуют следующие популярные иконочные шрифты, ознакомиться с которыми и скачать вы можете на соответствующих сайтах:
Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.
Иконки из этого шрифта применяются в админке Joomla 3.x.
Этот бесплатный шрифт включает более 320 контурных иконок.
Это не шрифт, а веб-сервис, позволяющий создавать наборы нужных к применению на сайте иконок из представленного набора и сохранять их в формате шрифта.
Иконки в формате изображений
В Интернете огромное количество ресурсов, предлагающих картинки для бесплатного скачивания. Мы не будем их пречислять и вводить вас в заблуждение, а ознакомим с самым лучшим, на наш взгляд, сервисом по подбору иконок — Iconfinder.
Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:
В строку поиска вводим запрос Joomla и ищем.
Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.
Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.
Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.
Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.
Знаете, с тех пор как я начал делать иконки для игр, я заметил одну вещь. Геймеры любят компьютерные игры, подписываются на паблики посвященные им, ищут моды, статьи, прохождения и все, что с ними связано. Но одну вещь я никак не могу понять, почему геймеры не интересуются игровыми иконками. Как-никак, они связаны с играми и хоть кто-то должен ими интересоваться, но как оказывается, тема иконок в какой-то параллельной реальности и интересуются ими единицы.
В общем, я тут подумал и решил популяризировать иконки, ну или попытаться. В этой статье я расскажу вам: кто такие эти иконки, зачем они нужны и в чем их отличие от значков и ярлыков. Как оказывается, эти термины путают 90% тех, кто ищет иконки. И это не удивительно, ведь все эти термины +- значат одно и тоже, но не совсем.
Что такое ярлык, значок и иконка:
Я не буду вставлять здесь статью из википедии с заумными фразами и расскажу все своими словами. В интернете есть куча статей на тему того, что есть что, но они только создают большую путаницу и объединяют эти понятия. И так давайте разбираться.
Это исполняемый файл и именно он запускает игру
Так вот ярлык — это, грубо говоря, телепорт к этому файлу, ну или ссылка. Никому ведь не хочется искать файл с запуском GTAV.exe по всему компьютеру, что бы поиграть в пятую гташечку. Именно поэтому при установке игры или программы в большинстве случаев автоматически создается ярлык на вашем рабочем столе.
Ярлык — это копия файла .exe и их разница в том, что при взаимодействии с ярлыком он обращается к файлу .exe (отличий конечно больше, но это уже совсем другая история)
Отличить ярлык от исполняемого файла можно, как уже писалось выше, расширением .exe, но беда в том, что по умолчанию в Windows расширения скрыты. Второй способ намного проще, на ярлыке всегда отображается маленькая стрелочка в левом нижнем углу значка (Смотри картинку выше)
Ну, и как вы уже поняли, ярлык — это далеко не иконка, но на ярлык можно поставить иконку.
Иконка: У многих при слове иконка воображение сходу выдает церковные иконы, но мы сегодня говорим не про них. Итак, в каждом исполняемом файле (это тот что заканчивается на .exe если кто забыл) содержится иконка. Иконка — это файл с расширением .ico, а ico — это сокращение от слова Icon, то есть иконка в переводе на Русский. В общем, это все, что нам нужно знать о том почему иконка так называется.
На вопрос, «что такое иконка?» многие отвечают банально — это значок. Нет, батенька, иконка — это не значок, иконка — это картинка (изображение), а еще точнее — это группа изображений. В одном файле .ico может содержаться куча изображений. Разница этих изображений в размере и используемом количестве цветов. Например: самые используемые размеры иконок в Windows 16×16 32×32 48×48 и 256×256 пикселей, но встречаются и совершенно другие.
Так выглядит файл Ico (иконка)
Это было необходимо для того, чтобы при смене вида (например в папке) с «список» на «крупные значки» вы видели не мелкие бздюльки, а крупную красивую картинку
В новых версиях операционной системы отпала необходимость создавать иконки всех возможных размеров. Теперь достаточно одной картинки большего размера и система сама подгонит ее под нужный размер.
Сейчас самый популярный размер иконок это 512×512 пикселей. Как многие пишут, в Windows 10 максимальный размер иконки 256×256, но на больших экранах размер 512×512 будет выглядеть лучше. Так же не стоит забывать про сторонние программы, которые используют иконки. Для смены иконок в сторонних программах используется формат .PNG
Значок: Ну и давайте попробуем разобраться, что такое значок. Как вы уже поняли, многие ошибочно называют значком иконку, а иконку значком.
В интернете нет точного определения, что такое значок, но есть куча статей, вводящих в заблуждение и рассказывающих все так, будто значок и иконка — это одно и то же. Но как значок может быть иконкой, если иконка — это файл Ico? Даже иконку в формате PNG не совсем корректно называть иконкой, так как файл содержит всего одно изображение. Но с иконкой в формате PNG это еще хоть как-то вяжется с логикой, а со значком, ну никак.
Обратите внимание на границы значков
Значок может существовать как без картинки (иконки), так и без текста, но без рамки, никак.
Это дает нам право говорить, что значок — это все вместе и называть только отображаемую картинку значком неправильно. Так же можно заметить, что значок необязательно должен быть квадратной формы. Какое бы отображение значков мы не выбрали на вашем компуктере: что список, что крупные значки, что любой другой, у всех разная форма, а как мы знаем, иконка должна быть квадратной формы. Даже, если холст иконки будет прямоугольным, то Windows сама растянет иконку до квадрата.
Как мы видим, есть очень много нюансов, которые не позволяют нам называть значки иконками, но все эти термины ходят вокруг да около. Вот и получается путаница, но по сути это разные вещи. В тех же поисковиках, ища иконки, люди вбивают слово значок или ярлык (и это еще в лучшем случае), а потом удивляются, что не нашли то, что искали. Да и сама Microsoft грешит путаницей и предлагает заменить значок, а не иконку.
Давайте подведем итог:
Ярлык — это тот же .exe файл, но работающий удаленно (прим. с рабочего стола), но при выполнении операций, обращающийся к основному файлу (прим. в папке с игрой).
Иконка — это картинка или набор картинок разного размера, содержащиеся в файле .ico
Значок — это папка, ярлык или любой другой файл, которые могут содержать изображения (иконку),текст и информацию о файле.
Почему иконки нужны, почему иконки важны:
Надеюсь с терминами мне удалось все разъяснить и сейчас я объясню почему иконки важнее, чем может показаться.
Многие скажут, мол, сколько пользуюсь компудахтером, даже не обращаю внимания на то, какие в системе иконки и вообще мне со стандартными норм, и будут от части правы. С виду, действительно, неважно какая у вас иконка, ведь программа или игра будет работать одинаково, что со стандартной, что с новой.
Но есть все-таки у качественных иконок пару не совсем очевидных плюсов. Все мы знаем, что человек любит глазами. При взгляде на то что нам нравится, у нас невольно поднимается настроение или мы получаем удовольствие. Нам нравятся клевые тачки, красивые девушки, картины, природа, крутые и стильные девайсы и куча чего еще.
Почему многие так восхищаются айфонами? Можно услышать такие ответы как: он как продолжение твоей руки, в нем все на своих местах, отлично работает, стильно выглядит и им просто хочется пользоваться. На ютуб канале Droider.Ru есть отличное видео о том, почему иконки в айфоне выглядят лучше, чем в том же андроиде (рекомендую к просмотру). Да и вообще, становится понятно почему Apple так заморачиваются по поводу дизайна, что сменили внешний вид девайсов и иконок и подогнали под форму суперэллипсов. Даже такие мелочи, как иконки могут поменять внешний вид вашей системы, а в сочетании с обоями, темами и другими программами вообще изменить до неузнаваемости.
Такое незначительное изменение, как смена иконки, может повлиять на частоту запуска игры или программы, вызвать зависть у друзей или подписчиков или просто выделиться среди коллег. Почему вы достаете телефон когда вам скучно? Да потому что вам приятно им пользоваться. Подумайте и вспомните свои старые кнопочные телефоны и свой новенький смартфон. Если не брать в расчет функционал, а ограничиться дизайном и внешним видом, я с уверенностью в 100% могу сказать к какому девайсу у вас потянется рука.
Если до сих пор есть люди, которые думают, что вся это дизайнерская ерунда не важна, я бы порекомендовал установить вместо Windows XP, 7, 8 или 10 старенький добрый MS-Dos. Там нет никаких иконок, да и вообще, никакого графического интерфейса. Современные системы выглядят так именно потому, что развитие графики и новые подходы к управлению вытеснили старые интерфейсы и не без помощи иконок, разумеется.
Иконки в современном мире присутствуют везде, просто это стало настолько обыденным, что на них не обращаешь внимание. Ваш смартфон, планшет, умные часы истыканы иконками, ваш браузер, практически любой сайт и даже в поисковой строке, когда нам выдают результаты, мы видим фавиконку. А теперь представьте, что вместо этих иконок пусто или просто текст.
Как тебе такой интерфейс Илон Маск
Что то не айс да? И куда тянется ваш палец? первым делом на значек однокласников, даже если вы ими не пользуетесь. Понимаете в чем разница?
А теперь взгляните на картинку ниже.
Я думаю все согласятся, что новые иконки выглядят куда приятнее и запускать такие игры вы будете явно чаще.
Есть куча программ для систематизации и сортировки ваших значков, упрощение запуска или просто для стильного отображения.
К примеру, всем известную и работающую с незапамятных времен легендарную RocketDock. Эта небольшая программка, которая зарекомендовала себя только с лучшей стороны. Она позволяет создать на рабочем столе панель для быстрого запуска игр и программ. Стильно компактно и нетребовательно к системе.
Нестареющая классика RocketDock
Есть у нее отличный клон ObjectDock, для тех кому мало одной панели. Можно сделать одну сверху, а вторую снизу (для игр и программ)
Также расскажу вам про одну программу под названием XLaunchPad. Эта программа, по моему скромному мнению, лучшая вещь для стилизации значков вашего рабочего стола. Удобная, красивая, многофункциональная. Она позволяет двойным кликом по рабочему столу открыть окно, в котором будут все ваши значки с играми и программами. В сочетании с качественными иконками это выглядит просто божественно. Особенно, когда иконки всех игр выглядят в одном стиле, это похоже на вашу полку с дисками на столе только в 1000 раз красивее и удобнее (еще и пыль не собирает). Программу даже можно приобрести в Steam
Вот такая красота появляется по двойному клику
А вот так бы она выглядела со стандартными иконками
Уже не так приятно, да?
К сожалению, есть у этой программы и один недостаток. Недостаток в том, что разработчики плевать хотели на свой продукт и готовы только грести с него деньги. Есть в программе баг, из-за которого после перезапуска, рандомно слетает иконка, которую вы ранее установили. Я даже как-то писал разработчикам о проблеме, но вместо решения ее, меня просто забанили. В общем пользоваться или нет решайте сами.
Вообще, за время существования операционных систем Windows вышло огромное множество программ для организации ваших значков, но даже эти 3 могут изменить ваш опыт в использовании своего компьютера.
Ну и под конец, для тех, кто захотел изменить свой рабочий стол в лучшую сторону, но не знает где брать иконки.
Первым делом, я бы порекомендовал отправиться на сайт DeviantArt. Если кто и делает иконки, то с вероятностью 90% он выкладывает свои работы там.
Второй вариант, воспользоваться Яндекс.Картинками и при поиске использовать фильтры «Png» и «512×512» либо «256×256»
Ну и третий вариант, это зайти в раздел файлы на сайте PlayGround или ArtGamer
Иконки в веб-дизайне: для чего нужны и как правильно их использовать
Зачем дизайнеры используют иконки
Если мы уберем сопутствующие изображения, скорость восприятия меняется:
Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:
С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.
Как с помощью иконок повысить конверсию сайта
Как любой контент на сайте иконки требуют продуманного подхода. При правильном использовании изображения могут стать еще одним инструментом повышения конверсии и управлением поведением покупателей. Что можно сделать для стимулирования продаж?
1. Привлечь внимание к преимуществам компании
Посещая сайты мы привыкли «прокручивать» страницы. Иконки помогают пользователю обратить внимание на важную информацию и задержаться взглядом на особенностях компании и персональных предложениях. Например, на бесплатной доставке или прилагаемых к заказу подарках.
Информация о работе магазина, условиях оплаты и доставки формирует доверие у клиента и убеждают сделать выбор в пользу этого магазина, а не его конкурента.
2. Расскажите, как сделать заказ или как работает компания
Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:
Так вы сэкономите место на сайте и клиенту не нужно будет читать полотна текста, чтобы понять как сделать заказ.
3. Расскажите о товаре с помощью изображений
В карточки товаров можно добавлять не только текстовые описания, но и изображения для обозначения характеристик или дополнительных параметров. Как сделать идеальную карточку читайте здесь.
4. Выделяйте акции и специальные предложения, а также нужные категории товаров
Чтобы посетитель сайта обратил внимание на акцию или нужный раздел, добавляйте иконки. Например, с помощью красных изображений, список акций становится намного заметнее:
Также с помощью иконок и различных плашек можно выделять нужные категории товаров, популярную продукцию, товары со скидками, новинки и прочее.
Какие иконки используют в дизайне
Использование самых разнообразных иконок, отличных по размеру, стилю, цвету и расположению является распространенным приемом среди дизайнеров. Обычно мы встречаем иконки на главном экране под большим слайдером, на страницах «услуги» или «контакты», в шапке сайта. Из-за такого разнообразия возникает вопрос: какие иконки лучше использовать для дизайна? Рассмотрим виды иконок и постараемся ответить на этот вопрос.
Линейные
Линейные иконки сочетаются как со строгим деловым стилем, так и придают дизайну сайта изящность и лаконичность.
Иллюстрации
Вместо тонких линий и ясных контуров используют специальные цветные рисунки. Такие картинки придают сайту красочности, бросаются в глаза при просмотре страницы.
Иллюстрации разрабатываются дизайнерами в стилистике сайта, рисуются специально для каждого проекта. Иконки такого стиля способны оживить дизайн, придать «свежести» и индивидуальности. Небольшие иллюстрации можно смело использовать как самостоятельные элементы, они будут заметны среди основного контента. Еще больше примеров использования иллюстрированных изображений можно посмотреть в нашем блоге.
Объемные
Некоторые веб-дизайнеры отходят от трендов «плоского» и минималистичного дизайна и используют вместо иконок самостоятельные изображения. Это могут быть вырезки из фотографий продукта или тематических картинок.
Такой подход следует использовать с осторожностью, чтобы не перегружать дизайн сайта лишними изображениями и отвлекать клиента от целевых действий. Если использовать объемные иконки, остальные элементы не должны быть нарисованными и мешать стилевому единообразию сайта.
Простые элементы
В некоторых случаях на сайт размещают не картинки, а простые геометрические фигуры или цифры, чтобы не загромождать дизайн элементами. В этом примере дизайнеры решили оформить самые распространенные вопросы клиентов пунктами:
А здесь вместо картинок использовали простой элемент галочку:
Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.
Шрифтовые иконки
Примеры использования иконок в веб-дизайне
Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.
Иконки для навигации
Как уже говорилось выше, иконки нужны для облегчения ориентирования пользователя на веб-странице. Особенно важно данное назначение иконок в интернет-магазинах и сайтах компаний, где главным целевым действием является оформить заявку или совершить покупку.
С помощью иконок пользователь всегда знает как перейти к формам заказа, в личный кабинет, к поиску или просмотру понравившихся товаров.
Информационные иконки
Иногда иконки используются, чтобы о чем-то рассказать клиенту: о продукции, компании или предоставить полезную информацию.
Такой контент прост для восприятия и побуждает пользователя воспользоваться услугами компании или купить предложенный товар. К этому пункту также можно отнести информацию о принципах компании, интересных фактах о товарах и прочее.
Социальные доказательства
Клиентам важно, что кто-то покупает товары магазина, обращается за предлагаемыми услугами. Это заставляет их верить, что продукция качественная и пользуется спросом. Через иконки можно донести до посетителей сайта информацию о количестве купленных товаров, опыте работы компании и прочее:
Исследования агентства Wider Funnel показывают, что размещение на веб-сайтах элементов социального доказательства повышает продажи в 9 из 10 случаев. Поэтому такой прием можно считать инструментом увеличения конверсии интернет-магазинов и продающих сайтов.
Призыв к действию
Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:
В этом примере рассказывается об этапах работы, которые отмечены порядковыми номерами и небольшими иконками для привлечения внимания и структурирования информации. У первого действия расположена кнопка с призывом оставить заявку на сайте.
Разделы каталогов
Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:
Таким образом каталог не превращается в простой список товаров, каждая категория выделяется из общего перечня продуктов.
Социальные кнопки
Эти иконки узнаваемы, поэтому на них обращают внимание и присоединяются к группам и сообществам, через которые можно призывать клиентов к новым покупкам.
Фильтры
Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:
Например, в интернет-магазине кофе сделали фильтр по способу приготовления и добавили иконок, чтобы клиент мог понять незнакомые термины и выбрать нужный товар.
Применение иконок в веб-дизайне помогает клиентам воспринимать информацию и привлекает внимание к важным моментам на сайте. Рассмотрим основные правила использования иконок, чтобы дизайн веб-страницы выглядел гармонично и был удобным для посетителей.
5 советов по созданию дизайна иконок
Создавая иконки для клиентов, дизайнеру важно не только учитывать ее назначение, но и соответствие изображений общему стилю веб-сайта и окружающему контенту. Как правильно использовать иконки в дизайне продающего сайта?
1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом
Например, если вы собираетесь обозначить доставку товара земным шаром, будут ли ассоциироваться перевозки с планетой? Этот значок подойдет для клиентов, находящихся далеко от офиса компании, но что, если ваш пользователь проживает в вашем городе? Поэтому при создании иконок нужно думать в первую очередь о целевой аудитории.
2. Дополняйте иконку текстом
Само по себе изображение несет в себе только декоративную функцию. Чтобы придать значку смысл, рассказывайте о том, что она обозначает.
3. Дизайн иконок должен быть похож между собой
Если вы используете несколько иконок одновременно, они должны быть согласованы друг с другом, чтобы не получилось так:
Иконки должны создавать стиль, а не нарушать его. В данном примере мы видим три «нарисованных» изображения и одно строгое и лаконичное. Оно выбивается из общего ряда и нарушает согласованность интерфейса.
4. Прозрачный фон облегчает восприятие
Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки кажутся одинаковыми. Сравните:
При просмотре иконок с синим фоном вместо мгновенного понимания, что нарисовано на картинке, приходится всматриваться и различать образы. Это схоже с чтением текста, где тоже приходится напрягать зрение и понимать смысл. Поэтому использование непрозрачного фона облегчает визуальное восприятие и легче интерпретируются посетителями страниц.