100+ шикарных контурных иконок — уроки фотошоп

Идеи Использования Линейных Иконок В Веб-Дизайне

Использование самых различных иконок по размеру, количеству и стилю в веб-дизайне настолько распространено, что зачастую встает вопрос о том, какие же именно по стилю иконки способны оживить тот или иной сайт и придать ему «свежести».

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

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

Но вот что занятно… Именно контурные (линейные или тонкие, как их еще называют) иконки придают дизайну уникальность, изюминку, побуждают пользователя к действиям и обладают некой магической силой, что буквально притягивает взгляд к дизайну сайта в целом.

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

Необходимо создавать соответствующие условия для их использования такими, чтобы иконки не потерялись среди контента (текста или видео), чтобы были на своем месте и несли свой смысл.

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

Линейные иконки используются не только в секциях Landing Page, но и в меню, социальных виджетах, областях навигации, даже просто среди всего общего объема контента.

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

Откуда брать идеи

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

Brianza Che Nutre

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

Каждая из них соответствует какой-то услуге компании и может изменять свой внешний вид, при наведении на неё мышкой, что превращает секцию в графическое меню сайта.

При этом плоский геометрический стиль хорошо подходит как под современные тенденции, так и под общую стилистку сайта.

RDT54 и Flyt Verden

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

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

o2Source и Sweet Magnolia Gelato Company

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

Другой вариант – узоры из иконок и стилистически подобранные активные. Компания сладких кондитерских приправ использовала иконки для создания всего веб-дизайна и, надо сказать, получилось неимоверно оригинально.

SB Joinery и Jorgerigabert

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

Линейные иконки – как часть основного контента

Для удобного усвоения информации на сайте иконки используются чаще и выглядит это как выстроенные в линию изображения или табличный блок 2х3. Иконки уже не являются ссылками на страницы сайта, а имеют исключительно информативный характер. Но и этот момент веб-мастера стараются оформить весьма оригинально.

Yama

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

MotoCMS и GoodPatch

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

Аналогично работали мастера и над проектом MotoCMS. Здесь иконки используются в секции описания движка с представлением преимуществ.

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

KPMG

Пройти мимо данного сайта невозможно. Оригинальные решения и внешняя красота манит буквально каждого. Но для нас интересна средняя часть страницы, где над анимированным изображением города (время суток совпадает с вашим) возвышаются пиктограммы.

Простые, линейные, ярко выделяющиеся – они быстро «бросаются в глаза» и несут в себе много информации, если подвести мышку. С одной стороны, это меню; с другой, своеобразная карта. В совокупности же, сайт приобретает эстетику и нотки изысканности.

Planet Escape

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

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

Посему, в данном контексте, такое сочетание является весьма интересным и необычным, и удобным.

Fineocar

Французы решили, напротив, насытить иконками почти весь сайт, сохранив информативность, стилистику, традиции и современные стандарты веб-дизайна. Что получилось…? Иконки стали олицетворением кнопок меню, которые разместились сразу на логовом изображении, создавая, тем самым, второю линию меню.

Более того, они используются и для подчеркивания контента ниже. Маленькие по размеру, яркие по контрасту, минималистически стилизованные – они выделяются и привлекают внимание посетителя к информации под ними. Справа в плавающей панели также размещаются иконки, подчеркивающие информацию и буквально заставляют посмотреть глазами в их сторону.

Читайте также:  Правильная настройка цветов в photoshop - уроки фотошоп

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

Годовой отчет Fiverr

Интересен и следующий пример – годовой отчет компании. Контент представлен пиктограммами – контурными, аккуратными, черно-белыми.

В правой же части страницы отображается контекстная информация при выборе той или иной пиктограммы.

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

Lovely Things

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

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

Другой, более строгий вид иконок не смотрелся бы и был бы явно чужеродным.

Social Blue

И еще одно новаторство с использованием геометрических форм, диагоналей и крупных элементов, придающие дизайну изысканную привлекательность.

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

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

Завершение

Линейные иконки – отражение изысканности, утончённости, делового настроя и строгого характера. Между тем, они сказочным образом освежают сайты, добавляют четкости и упорядоченности и не ущемляют возможностей для творчества.

Разумеется,  просто взять и разместить их на своем сайте или Landing Page не получится. Весь дизайн должен органически им соответствовать, чтобы не получилось так, что дизайн, рисованный от руки, а иконки с проекта Social Blue. Не сочетаются они.

Линейные пиктограммы могут стать центром всего дизайна, могут стать частью, хрупкой и элегантной, подчеркивающей вкус владельца и создателя.

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

Источник: https://wayup.in/blog/sample-and-idea-use-line-icons-in-web-design

Рисуем векторные иконки облаков в фотошопе

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

Шаг 1: Создание фигуры облака

Создайте новый документ 745х200 пикслей. Установите основной цвет голубой #48abff . Возьмите инструмент «Эллипс» щелкните левой кнопкой мыши по документу, в диалоговом окне установите ширина и высота: 70 пикселей

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

Снова возьмите инструмент «Эллипс», щелкните по документу и установите ширина/высота: 90 пикселей;. Поместите фигуру как показано ниже:

Создайте еще одну фигуру, только в этот раз ширина и высота: 40 пикселей;. У вас должно получится, так:

Теперь нужно выровнять нижнюю часть облака. Для этого воспользуйтесь инструментом «Прямоугольник» установив ширина: 90 пик.; высота: 30 пик;

Далее нужно объединить все слои с овальными фигурами в смарт-объект, но сначала нужно их выделить. Для этого кликаем мышкой по первому слою, затем зажимаем клавишу Shift и кликаем по последнему слою с фигурой. Нажимаем правой кнопкой мыши по выделенным слоям и выбираем «Преобразовать в смарт-объект».

Сделайте дубликат смарт-объекта. Для этого нажмите Ctrl + J. Установите значение параметра Заливка: на 1%.

Далее нужно сделать обводку фигуры. Для этого откройте вкладку Слои -> Стиль слоя -> Обводка, и установите значения как показано на изображении ниже:

Перейдите на основной слой со смарт объектом, с помощью трансформации немного уменьшите фигуру. Для этого откройте вкладку Редактирование — > Трансформирование -> Масштабирование или нажмите сочетание клавиш Ctrl+ T.

Теперь объедините эти два смарт объекта в один смарт объект. Как это сделать было написано выше. Назовите данный слой «Облако». 

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

Шаг 2: Добавление иконок

Воспользуйтесь инструментом «Произвольная фигура». Установите основной цвет «Белый». Кликнув правой кнопкой мыши по документу у вас откроется диалоговое окно, где нужно выбрать будущую иконку. Я выбрал фигуру «Почта», которая подразумевает страницу с формой обратной связи.

Далее разместите выбранную фигуру по центру облака. У вас получилась готовая векторная иконка в стиле облака «Обратная связь».

Итоговый результат: Набор векторных иконок в форме облака

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

Источник: http://ps-magic.ru/news/risuem_vektornye_ikonki_oblakov_dly_saita_v_photoshope/2015-04-12-182

Применение функции экшн при автоматизации процасса создания серии контурных иконок в Illustrator

В этом уроке мы научимся автоматизировать  повторяющиеся действия при помощи функции Action в Adobe Illustrator. Мы также научимся тестировать и редактировать созданный action.

Функция  Action в Illustrator предназначена для того, чтобы ускорить процесс создания ваших векторных  работ. Сегодня мы применим эту функцию для создания контурной иконки.

Конечно, когда речь идет о создании одной иконки, нет смысла создавать  экшн. Но если  вы создаете серию иконок, подобный экшн сохранит  вам много времени.

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

Step 1

Итак, мы имеем два объекта: это земной шар и форма  самолета. Это довольно простые объекты и, я думаю, нет необходимости описывать,  как они сделаны.

Земной шар представляет собой составной путь (Compound Path). Простое  наложение объектов друг на друга будет плохо восприниматься пользователями.

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

Step 2

Открываем панель Actions (Window > Actions) и создаем новый экшин, выбрав соответствующий пункт в всплывающем меню панели  Actions.

Даем имя нашему экшну, затем нажимаем на кнопку Record в открывшемся диалоговом окне.

Step 3

Выделяем фигуру самолета, затем переходим Object > Path > Offset Path… и  устанавливаем величину смещения, нажимаем на OK.

Как вы видите, первое действие появилось в панели Action.

Step 4

Новый объект появился в панели Layers, и он является выделенным в данный момент.

Для следующего действия нам необходимо выделить два  нижних объекта. Нет проблем, переходим Select > Next Object Above, затем Select > Inverse

Читайте также:  Кисти водопады - уроки фотошоп

Step 5

Теперь нажимаем на Minus Front в панели Pathfinder. Пробел между объектами образован.

Нам осталось только закончить экшн.  Выделяем все объекты и группируем их (Select > All, Object > Group). Отменим выделение (Select  > Deselect)

Иконка готова, нажимаем на Stop в панели Actions.

Step 6

Протестируем созданный action. Вы можете тестировать его в режиме шаг за шагом. Для  этого выделите верхний объект и два раза кликните по первому действию «Offset path” в панели Actions.

Упс! В этот раз мы имеем два выделенных объекта  вместо одного, как это было в процессе записывания action. Почему так происходит, я не знаю, но нам придется  переписать часть экшена. Выделяем и удаляем строки, указанные на рисунке ниже,  из панели Actions.

Step 7

строку «Offset Path”, затем нажимаем на кнопку Record.

Переходим Select > Next Object Below

Теперь переходим Select > Next Object Above и еще раз Select > Next Object Above

И наконец, Select > Inverse. Нажимаем на кнопку Stop.

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

Будьте всегда в курсе свежих новостей о векторной графике, новых   уроков   работы в Adobe Illustrator, статей и интервью посвященных   графическому   дизайну. Команда RU.Vectorboom работает для Вас!

Источник: http://ru.vectorboom.com/load/sovety/tekhniki/icon_with_actions/16-1-0-93

10 наборов бесплатных иконок

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

Беда в том, что большинство бесплатных иконок не отличаются ни качеством, ни креативом, а порой так нужно найти что-то необычное, особенно, если проект сам по себе неформальный.

FreelanceToday предлагает вашему вниманию 10 сетов бесплатных иконок, которые придадут индивидуальность вашему проекту

HAPPICONS

Очень симпатичные иконки, объединенные темой счастья. Очень качественная работа дизайнера Дариуса Дана. Всего в сете 40 цветных иконок. Создатель этой замечательной коллекции предупреждает, что скоро иконки станут платными, так что если данный сет вам понравился, поторопитесь скачать.

CLASS LEARNING ACHIEVEMENT

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

FLAT WRITING AND DRAWING EQUIPMENT

Набор иконок, на которых изображены различные пишущие принадлежности – перо, карандаш, кисть. Всего в сете 6 иконок. Дизайнер сделал коллекцию монохромной, но это не проблема, так как иконки всегда можно раскрасить – сет доступен в PNG, PSD, а также в векторном формате Ai.

FREE DRINKS-LIFESTYLE ICON SET

Данную коллекцию иконок создал дизайнер, работающий под ником Oxygenna. Он же создал и предыдущий сет. Данный набор отлично подойдет для сайтов с «легкомысленным» дизайном. Иконки сделаны в трех вариантах – контур, монохром и цвет.

DASHEL

Большая коллекция из 45 минималистичных иконок. Очень качественная работа – в коллекции можно найти иконки, на наиболее популярные темы. Иконки представлены в трех форматах: SVG, PSD, PNG.

PAMOKE

Очень забавный сет от дизайнера Мигеля Авилы. Коллекция подойдет не только веб-дизайнерам – иконки можно использовать при оформлении флаеров, брошюр и буклетов. Сет представлен в форматах AI, EPS и PNG. Несмотря на то, что иконки кажутся очень простыми, сделаны они с большим мастерством.

EDUCATE ICON SET

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

FREE FANTASY ICONS

Очень необычная коллекция иконок на тему фэнтези. Такие иконки не так-то просто найти в интернете. Создатель этого замечательного сета – дизайнер Борис Кондратенко. В этом наборе вы найдете контурные иконки с изображением боевой амуниции, а также значки эльфов, оков и других фэнтезийных персонажей.

FREE TRAVEL ICON SET

Небольшая коллекция иконок на тему отдыха и путешествий. Пригодится тем, кто работает над созданием туристических сайтов. Коллекция совершенно бесплатна, иконки можно использовать как в личных, так и в коммерческих проектах. Набор представлен только в векторных форматах AI и EPS. Для редактирования элементов потребуется программа Adobe Illustrator версии CS3 и выше.

FREE ARROWS ICONS

Коллекция стрелок и указателей. Все элементы тщательно проработаны. Растровых вариантов нет, только вектор, формат AI и EPS. Коллекцию можно использовать в коммерческих проектах, например при создании пользовательского интерфейса для мобильных приложений.

Источник: https://freelance.today/poleznoe/10-naborov-besplatnyh-ikonok.html

Уроки | Я люблю иконки!

Фишка из области «спасибо кэп», но тем не менее напишу — вдруг кто не знает:)
Есть в панели слоев вот такой вот набор иконочек.

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

Я хочу рассказать, в чем именно их разница.

Продолжить чтение

Урок по рисованию иконки из «Mmm, so sweet!»

Продолжить чтение

Однако тем не менее ко мне частенько стучатся в личку ребята со всякими вопросами, касающимися вступления — обычно по поводу самих работ: какие подавать? а сколько? а что делать если нет работ? а где качаться? а есть ли какие-то уроки? а какие? а где?
Дабы помочь им разобраться с самыми первыми и самыми общими проблемами, мы составили небольшой F.A.Q., где расписаны способы подготовить себе приличное портфолио на вступление, ссылки на уроки, варианты тестовых заданий и прочие всякие полезные штуки.

Также я решила составить свой личный список ссылочек на классные уроки.

Их пока совсем немного (я буду пополнять этот список постепенно), но эти работы я считаю достаточно интересными в плане выполнения и полезными в плане изучения инструментария и подходов в реализации какого-то эффекта.

И да — все ссылки идут на уроки в блогах непосредственных авторов. Не поленитесь полистать их — там может быть еще много замечательных туторов. Продолжить чтение

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

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

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

Читайте также:  Плоские иконки - уроки фотошоп

Прежде всего, перечислю самые популярные случаи использования мелких иконок:

  • в объемных меню или многопунктных списках разделов на сайтах;
  • в качестве сопроводительных, поясняющих иконок на сайтах (конвертик напротив емейла, домик напротив «Сделать стартовой» и т.п.);
  • в меню мобильных телефонов;
  • в программных интерфейсах, на «рабочих» кнопках, возле переключалок и маячков и т.п.;
  • в игровых интерфейсах;

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

Интуитивная понятность

Это на тизере 200х200 вы можете позволить полет фантазии и необычные метафоры, а 24-пиксельная кнопка «Вырезать» или «Отправить другу на емейл» должна быть понятна пользователю с полувзгляда. Да и геймеру во время напряженного боя будет некогда всматриваться, какое зелье у него лечебное, а какое — зелье маны.

Общий стиль

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

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

А вот такие мелкие наборы частенько выглядят так, будто набраны из разных сетов — там мячик-«Интернет» получился с отличным обьемом, а вот клавиатура вышла просто эталоном пиксельарта.

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

Продолжить чтение

Поэтому я и решила поделиться парой инструментов ФШ (если конкретнее — Slice Tool и волшебное «Windows-Arrange-New window for…»), очень облегающих и ускоряющих мою работу — вдруг для кого-то это будет полезным:)

Итак, кликаем по картиночке для привлечения внимания и ныряем под кат:)

Продолжить чтение

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

Продолжить чтение

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

Источник: http://iloveicons.ru/blog/category/uroki-2/

Топ 50 бесплатных наборов иконок для веб-дизайна за 2017 год

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

Возможно, этот год выдался не особо «урожайным» для дизайна иконок, но тем не менее, несколько интересных наборов, которые заслуживают вашего внимания, всё же засветились на горизонте.

В этом обзоре предлагаю на рассмотрение 50 лучших(сугубо на мой взгляд) бесплатных коллекций иконок, появившихся в открытом доступе в течении 2017 года. Все наборы абсолютно бесплатные и доступны для скачивания без каких бы то ни было ограничений.

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

Контурные иконки

Контурные или линейные иконки очень популярны в мире веб-разработки, так как отличаются особой простотой форм и минимализмом, не жертвуя при этом информативностью. К тому же, в большинстве своём, представленные пиктограммы можно использовать не только для сайтов, они также отлично подходят для приложений на платформе Android и iOS.
 

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

По-настоящему огромная коллекция качественных иконок на все случаи жизни. На сегодняшний день представлено около 60,000 иконок в любом формате, размере и цвете. Библиотека ежедневно обновляется и пополняется, от 3 до 20 иконок в день.

Количество: 60 000 +
Форматы: SVG, AI, EPS, PNG, PDF, Fonts  

1800 бесплатных минималистичных иконок

Пакет включает в себя 1800 иконок на белом и черном фоне в форматах: .sketch .psd .ai .svg .eps и .png.  

132 Контурные иконки

Небольшой набор качественных линейных иконок в формате .ai  

70 бесплатных иконок

Бесплатный пакет из 70 векторных иконок в форматах .sketch .ai  

Набор бесплатных цветных иконок

Векторные иконки в форматах Ai, EPS и SVG  

6. 90 Бесплатных иконок

Хороший набор из 90 бесплатных контурных иконок, а так же представлены иконки со сплошной фоновой заливкой, для Sketch и Illustrator.  

Bytesize

Отличный набор бесплатных иконок в формате SVG. Каждый значок кодируется вручную по сетке 32 x 32 и использует штрих SVG, что обеспечивает максимальную гибкость стиля; это означает, что вы сможете настроить вес, цвет, размер и, при необходимости, сделать края иконок округлыми или квадратными.  

Набор бесплатных иконок для дизайнеров

В наборе представлены 38 контурных иконок популярных инструментов редактора изображений, для свободного скачивания доступны иконки в форматах AI, EPS, SVG и прозрачного PNG (1024px).  

Набор бесплатных контурных иконок

Замечательный набор абсолютно бесплатных, контурных иконок в форматах .png .pdf .svg .sketch .ai  

40 Мини-иконок

Небольшой набор качественных мини-иконок.
Форматы: AI, EPS, PNG, SVG
Размеры: 16 x 16, 32 x 32  

Иконки на чистом CSS

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

Для подключения таких библиотек иконок достаточно одного файла .

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

CSS ICON

В комплекте 512 иконок, библиотека регулярно пополняется.  

Iconoo

Небольшая библиотека иконок на чистом CSS.  

Наборы красочных разноцветных иконок

Цветные контурные иконки

Набор из 30 цветных линейных иконок в свежих пастельных тонах. В комплект входят иконки в векторном формате (SVG) и PNG разных размеров.  

Красочные иконки Ficons

120+ Бесплатных красочных иконок в формате PSD  

Изометрические иконки

Коллекция из 30 плоских изометрических иконок. Все иконки, включенные в набор, полностью редактируются и настраиваются в Illustrator. В комплекте различные размеры PNG.
Форматы: AI, EPS, PNG
Размеры: 57px, 114px, 228px, 456px, 912px  

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

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

Наборы иконок в материальном дизайне

Источник: http://dbmast.ru/50-besplatnyh-naborov-ikonok-2017

Ссылка на основную публикацию