55+ лучших бесплатных наборов плоских иконок
Несмотря на то, что популярный несколько лет назад тренд плоского Flat дизайна постепенно пошел на спад, мы решили обновить данную статью с наборами плоских иконок, поскольку они все еще активно используются. Сейчас подобные элементы можно встретить в иллюстрациях для сайтов, в так называемом Metro дизайне веб-проектов, в разных интерфейсах мобильных / десктопных приложений и т.п.
В архиве «Дизайн Мании» вы найдете похожие по стилю материалы, например, те же простые или монохромные иконки. Достаточно много их встречается в подборке графики цветов и растений, в красочных иконках программ или среди аватарок лиц мужчин и женщин. У плоского дизайна есть свои характерные черты и преимущества, которые вы с легкостью сможете уловить из примеров ниже. Для скачивания кликайте по изображениям и переходите на сайты-источники.
Free Flat Color Icons
3600 Flat Icons Bundle
Громадный набор для личного и коммерческого использования.
Каждый объект здесь доступен в 3-х разных размерах.
40 Flat Icon Pack by Paul Flavius Nechita
Flat Icons EPS
83 Flat Line UX And E-Commerce Icons For Free
Flat Shadow Social Media Icons
100 Free Food & Drink Icons
Flat Rectangular Europe Flag
Данный архив вы также могли видеть в статье про бесплатные изображения флагов мира вместе со многими другими. Форма картинок прямоугольная, хотя размеры при этом квадратные — от 512х512 до самых маленьких 16×16. Кроме базового формата PNG, есть отдельные файлы ICO под Win и ICNS под Мак. Использовать можно лишь для личных нужд, а если захотите добавить в софт/сайты бизнеса, придется покупать лицензию (либо смотрите альтернативы по ссылке в первом предложении).
60 Astonishing Flat Icons For Free
Modern Flat Icons
30 Icons Free
Flat Design Icons Set Vol1
Flat Design Icons Set Vol2
Small-n-Flat Icons
Meroo – A Gorgeous Free Flat-Styled Icon Set
Flat Icon Set
Free Vector Polygon Social Media Icons
Среди всех наборов встречается достаточно много плоских иконок социальных сетей, хотя, по сути, это одна из самых популярных тематик для данной сферы в целом.
На «втором месте» находятся разные программы и приложения, логотипы которых используются не только в интерфейсе сайтов, то и на компьютере / телефоне. Потом уже идут всякие нишевые тематические картинки: бизнес, интернет, работа, стрелочки, люди и др.
Freebie Friday: Flat Icons
Accounting — Material icons
Free Flat Social PNG & PSD Icons
24 Flat Icons
Набор состоит из плоских иконок от талантливого дизайнера Jan Dvořák. В архиве имеется PSD так что сможете изменять исходники как вам будет нужно.
Flat Icon Set for Professionals
Если посмотреть на ссылки, то бОльшая их часть презентуется в популярных социальных сетях для дизайнеров Dribbble и Behance. Получается, что это теперь основные источники бесплатных материалов? Неужели отдельные Standalone блоги и дизайнерские онлайн-проекты утратили былую активность?
Хотя, справедливости ради стоить отметить, что также много плоских иконок есть на Deviantart – советуем воспользоваться их поиском, т.
к. значительную часть наборов оттуда мы не включили в статью, дабы не раздувать ее до нереальных масштабов.
Metro UI Icon Set — 725 Icons
25 Free Flat Vector Icons
Free Program Icons
Flat Icons (PSD)
Free Flat Icons 2
Flat Icons PSD by Alberto Valentin
Flat Design Free IconSet
Google JFK Icons — ICO and PNG
Flat Design Icons Set Vol4
40 Valentine’s Icons
Если вы ищете подобную графику, то в блоге был пост про романтические кисти и вектор со множеством интересных работ.
Graphic Design Icons Set
50 Flat Icons Pack by Martz90
@2x Flat icon set [PSD]
Freebie: Cinema Icon Set (SVG)
Flat Icons / PSD
Free Flat Icon Set by Barry McCalvey
30 Flat Shopping Icons
Flat Icons (PSD) #2 by Pierre Borodin
Social Icons Freebie by Pierre Borodin
12 Flat Icons Free by Dan Vineyard
Flat Icons Practice Set PSD
Flat Icons Practice Set PSD — это 9 простых плоских иконок.
Рабочая такая подборка — дискета, письмо, лупа, папка, заметка, часы и т.п.
Flat Icons Freebie
Как и в предыдущем случае, тут также содержится 9 объектов, но с закругленными краями.
Free Flat Icons
Если вы посмотрите на скриншот набора, то можете заметить, что многие варианты здесь пересекаются с другими архивами. Это нормально. Есть даже плюс-минус идентичные, но все они чем-то отличаются: наличием векторных исходников, подложкой, тенью, цветами и т.п.
Flat Design Icons Set Vol3
20 Flat Icons (PSD)
Еще 20 плоских иконок размером 128х128 пикселей в PSD формате (+вектор). Вы можете изменять их как посчитаете нужным. На светлом фоне данная графика, кстати, выглядит «спокойнее», автор, видимо, специально хотел сделать иллюстрацию набора максимально яркой.
Flaticon.com
Среди всех онлайновых архивов иконок можно выделить Flaticon, который, как вы видите по названию, специализируется на плоских Flat иконках.
Слева сверху там есть блок фильтров, где разрешается выбрать бесплатные материалы и просматривать только их. Хотя в некоторых случаях, даже несмотря на статус Free советуем детальнее изучить лицензию распространения для коммерческих задач.
Ниже предлагаем немного премиальных вариантов, которые могут похвастаться достаточно крупными наборами из 200-400 и даже 800 элементов.
800 Flat Icons Web&Internet
100 Vector Social Media
Universal Flat Icons
280 Simple Flat Vector
8 Categories Flat Icon
Minimalist Flat UI Design Element
Set of Different Flat Icons
Итого. В ходе обновления заметки мы увеличили ее содержимое в 5 раз и получили более 55+ красивых плоских иконок для дизайнеров. Тут представлены разные тематики, стили реализации и форматы графики. Надеемся, вам этот пост пригодится в работе.
Полное руководство по созданию набора плоских иконок
1. Используйте оптическую сетку
Иконку обычно можно привести к одному из базовых форматов: горизонтальный прямоугольник, вертикальный прямоугольник, диагональный прямоугольник, круг, треугольник, квадрат.
Размытие показывает, что у этих фигур одинаковый визуальный вес, потому что они превращаются в похожие по размеру пятна.
В зависимости от формы иконки, впишите её в соответствующую рамку сетки. Например, квадратные иконки более компактны, чем треугольные или вытянутые.
Чем компактнее иконка, тем меньше ей нужно пространства. Чем больше у неё острых углов или мелких деталей, тем больше ей нужно места.
Не становитесь рабом сетки. Она должна помогать, а не ограничивать. Если иконка выглядит лучше с выделяющимися элементами, сделайте так.
2. Помните о пиксельной сетке
Чтобы иконки выглядели отчетливо на всех экранах, придерживайтесь пиксельной сетки и отдавайте предпочтение границе в два пикселя, которая обеспечивает достаточно плотный и четкий силуэт.
Если вы выберете границы толщиной в один пиксель, они могут быть внутренними или внешними, но они не должны быть центрированными.
Центрированные границы толщиной в один пиксель делают иконку размытой в масштабе в 100%, хотя она и кажется четкой при приближении.
Устанавливайте начальные и конечные точки диагоналей в соответствии с пиксельной сеткой. Диагонали с углами в 45°, 30° и 60° выглядят четче, чем диагонали с углами вроде 13,7° и 81°.
3. Придерживайтесь определенного уровня детализации
Лучше начинать создавать набор иконок с самой сложной из них. Это определит уровень детализации и поможет добиться одинакового визуального веса.
Когда у иконок разный уровень детализации, самые детальные из них привлекут больше внимания пользователя и будут казаться визуально тяжелее.
4. Контролируйте минимальный размер промежутков
Расстояние между соседними элементами иконки не должно быть слишком маленьким или непостоянным. Определите минимальный промежуток и сохраняйте его везде, чтобы избежать “слипания” контуров.
Для линейных иконок минимальное расстояние лучше сохранять равным толщине линии. Линии должны быть либо разделены, либо соединены, но никогда не почти соединены.
5. Уберите повторяющиеся части
В наборе иконок у вас могут быть повторяющиеся детали. Избавьтесь от них, чтобы привлечь внимание пользователя к тому, что выделяется. Это как сокращение дроби в математике. Чем меньше шума, тем больше понимания.
Если пользователь уже понимает, с чем работает, не нужно повторять это снова и снова. Например, отсутствие иконок с конвертами не заставит людей думать, что это не почтовое приложение.
Это правило также относится к разным украшениям вокруг иконки. Если они не помогают читать иконку, они мешают.
6. Выберите определенный стиль и придерживайтесь его
Не нужно смешивать объемные изображения с фронтальными проекциями в одном наборе. Постоянство стиля поможет пользователям узнавать иконки и понимать, что они обладают одинаковой важностью.
Этот же принцип относится к линейным иконкам или иконкам с заливкой. Если вы будете их смешивать, люди могут подумать, что они обладают разной степенью важности или статусом.
Если, конечно, вы этого не добиваетесь специально. Например, иконка с заливкой может обозначать основную команду, а линейные иконки — остальные команды.
Хорошо будет иметь два варианта каждой иконки в интерфейсах. Линейная иконка — для выключенного или обычного состояния, а иконка с заливкой — для состояния после нажатия.
7. Используйте двойную систему размеров
Восьмипиксельная сетка и сетка в 12 колонок используются во многих интерфейсах, так как они более гибкие по сравнению с размерами на основе десятых долей. 12 можно разделить на 2, 3, 4 и 6. Поэтому 24 или 48-пиксельные размеры иконок стали стандартом. Эти иконки можно масштабировать на больший размер при необходимости.
8. Сохраняйте силуэты чистыми и аккуратными
Перфекционизм — это не цель. Никому не нужны выверенные до пикселя линии. Но это важно для правильного отображения иконки в финальном продукте. Помните о минимальном количестве элементов формы и отсутствии пробелов между соседними элементами.
То же самое относится к раздражающим размерам в 8.999 px или 100,001 px. Если точки размещены верно, иконка выглядит четкой. При этом у вас не будет риска получить лишние точки и пробелы при слиянии формы.
9. Чистите SVG от мусора
Многие редакторы интерфейса вроде Sketch могут создавать SVG с ненужными артефактами: лишними группами, слоями цветов и обтравочными масками. Давайте посмотрим. В Sketch все выглядит хорошо.
Откроем этот SVG в другом редакторе. Вы заметите пустые слои, ненужные группы и иногда и обтравочные маски. Все эти вещи могут стать причиной проблем при использовании на веб-странице.
Вы можете убрать этот мусор и сохраниться.
Вы увидите, что у SVG Sketch (picture.svg) и у отредактированного SVG Illustrator (picture_new.svg) разные предпросмотры.
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].
45 красочных плоских иконок [Халява] — Smashing Magazine
- Чтение через 2 мин.
Icons - Поделиться в Twitter, LinkedIn
IconsОб авторе
Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет, он, скорее всего, занимается интерфейсом и UX… Больше о Виталий ↬
Как часто вы ищете красивые, дружелюбные, хорошо оформленные иконки , которые хорошо впишутся в довольно неформальную дизайнерскую атмосферу? Что ж, если вы не склонны иметь только корпоративных клиентов, вы определенно можете использовать набор иконок, который мы выпускаем сегодня. Иконки совершенно бесплатны для использования как в коммерческих, так и в личных проектах, включая программное обеспечение, онлайн-сервисы, шаблоны и темы. Обратите внимание, что этот набор значков находится под лицензией Creative Commons Attribution 3.0 Unported. Вы можете изменить размер, цвет или форму значков. Указание авторства не требуется, однако перепродажа наборов или отдельных пиктограмм запрещена. Пожалуйста, всегда предоставляйте кредиты создателям и ссылку на статью, в которой была выпущена эта халява, если вы хотите распространить информацию.
Как часто вы ищете красивые, дружественные, хорошо оформленные иконки , которые хорошо впишутся в довольно неформальную дизайнерскую атмосферу? Что ж, если вы не склонны иметь только корпоративных клиентов, вы определенно можете использовать набор иконок, который мы выпускаем сегодня. Иконки совершенно бесплатны для использования как в коммерческих, так и в личных проектах, включая программное обеспечение, онлайн-сервисы, шаблоны и темы.
Обратите внимание, что этот набор значков находится под лицензией Creative Commons Attribution 3.0 Unported. Вы можете изменить размер, цвет или форму значков. Пожалуйста, всегда предоставляйте кредиты создателям и ссылку на статью, в которой была выпущена эта халява, если вы хотите распространить информацию.
Полный предварительный просмотр набора иконок. (Просмотр увеличенной версии)Полностью многоуровневый и легко редактируемый векторный формат. (Просмотреть увеличенную версию) Несколько иконок включены в набор иконок.
(Просмотреть увеличенную версию)Больше после прыжка! Продолжить чтение можно ниже. талантливых веб-дизайнеров, разработчиков и многих других, и хотели отблагодарить дизайнерское сообщество и тех, кто помогал нам. Вот почему мы разработали набор из 45 иллюстрированных плоских иконок исключительно для Smashing Magazine. Эти иконки были созданы, чтобы объединить два из самых популярных тенденций дизайна, «плоский» и «иллюстрированный». Используемые цвета и формы успешно подчеркивают две тенденции. Плоские иллюстрированные значки предназначены для работы на различных цветных фонах и устройствах. Очевидно, что тенденция плоского дизайна останется навсегда; мы надеемся, что этот иллюстрированный набор иконок добавит разнообразия вашим проектам!»
Спасибо Эми Эндрюс и творческим умам Whoishostingthis — мы искренне ценим ваше время и усилия! Продолжайте в том же духе!
Дополнительная литература на SmashingMag:
- 100 фантастических бесплатных рисованных иконок в стиле дудл
- Хороший контент слишком ценен, чтобы умереть
- Как помочь реальному рыцарю достичь своих целей
- Почему адаптивный веб-дизайн должен победить
тренд в дизайне иконок |
Плоский дизайн в последнее время стал очень популярным.
Многие веб-сайты используют принципы плоского дизайна и соответствующим образом упрощают свои интерфейсы. Действительно, многие недавние редизайны пользовательского интерфейса и новые веб-сайты используют плоский дизайн; эта тенденция стала проявляться практически везде, как на сайтах, так и в приложениях.
Icons также идут в ногу со временем, когда речь идет о последних тенденциях. Появляется все больше и больше иконок с чистым плоским дизайном.
Этот тип дизайна приобрел свою популярность с появлением новой операционной системы Windows 8 и новых дизайнов продуктов от Google, которые включают в себя полностью плоские элементы. Эту идею используют и другие известные сайты.
Изменение значков Gmail и Google Диска
Стиль значков Metro и пользовательский интерфейс от Microsoft, вероятно, являются самым популярным примером плоского дизайна и представляют собой один из немногих случаев, когда Microsoft стала настоящим законодателем моды в дизайне интерфейса и значков.
дизайн.
Изменение логотипа Windows
Новые иконки в стиле Metro
Плоский дизайн может быть красивым и привлекательным без лишней суеты и украшений. Это может быть простой способ передать сообщение или продвигать продукт или идею. Плоский дизайн стремится к простоте и мощному визуальному воздействию, фокусируясь на цвете и форме.
Плоский дизайн — это метод, в котором не используются трехмерные элементы, тени, градиенты и другие приемы, помогающие создать трехмерный эффект. Иконки и элементы интерфейса строгие, без теней.
Однако в последнее время плоский дизайн немного изменился; было введено тонкое затенение, а тени используются, чтобы немного поднять значки. Большинство проектов в наши дни попадают в категорию «почти плоских», где внешний вид и концепция мало что значат.
Почти плоские иконки от «Пьера Бородина»
Большинство из нас уже видели программную презентацию Apple, в которой они анонсировали новую операционную систему для своих портативных устройств, iOS 7.
Как уже давно обсуждалось, Джони Команда Айва упростила интерфейс и сделала его более простым на ощупь и с более простым дизайном. Apple, наконец, приспособилась к быстрому росту популярности этой тенденции.
Превью iOS7, похоже, полностью разделило поклонников Apple. В то время как некоторые приветствуют новый более простой интерфейс, другие ругают очевидную непоследовательность и «плохо» разработанные значки.
Ваше ПО горячее, а иконки нет? Посмотрите, как мы можем помочь
Получить пользовательские значки
Apple не в полной мере использовала плоский дизайн. Они по-прежнему используют в своих проектах градиенты и тени — две особенности, которые не характерны для плоского дизайна. Они также, кажется, используют их почти без разбора на своих иконках, хотя мы еще не видели окончательный релиз; поэтому я подозреваю (надеюсь), что они вытащат его из этого мешка, как обычно, после освобождения. Apple проделала долгий путь к упрощению дизайна, но, возможно, впервые за очень долгое время не совсем справилась с задачей, по крайней мере, в бета-версии.
Однако их иконки стали более изящными. 3D-иконки заменены более плоскими изображениями; внутри каждого из значков есть более крупные изображения, которые меньше похожи на исходные рисунки. Все тени в дизайне Apple сведены на нет. Значки кажутся больше из-за отсутствия украшений, а яркие цвета помогают различать разные значки. Угловые радиусы также были немного скорректированы, чтобы еще больше отличать значки от более ранней iOS.
Изменение иконок iOS
Финальная версия iOS 7 будет доступна осенью. У разработчиков еще есть время привести дизайн пользовательских приложений в соответствие с новым видом всей системы.
Например, Skype стал намного более плоским после его покупки Microsoft и некоторого редизайна в сторону мозаичного Windows Phone. Приложение уже выглядит хорошо для iOS 7.
Плоский пользовательский интерфейс Skype
По мере того, как все больше операционных систем переходят на плоский дизайн, легко задаться вопросом, закончены ли, по крайней мере на данный момент, более традиционные трехмерные дизайны иконок.