Топ 50 бесплатных наборов иконок для веб-дизайна за 2017 год – Dobrovoimaster
Несмотря на то, что изменения тенденций дизайна пользовательского интерфейса, в этом году не были столь значимыми, как мы наблюдали в предыдущие годы, именно иконки, явно стали более совершенными, более специализированными, полностью охватив и смешав все лучшие стили от ранее популярных иконок.
Возможно, этот год выдался не особо «урожайным» для дизайна иконок, но тем не менее, несколько интересных наборов, которые заслуживают вашего внимания, всё же засветились на горизонте. В этом обзоре предлагаю на рассмотрение 50 лучших(сугубо на мой взгляд) бесплатных коллекций иконок, появившихся в открытом доступе в течении 2017 года. Все наборы абсолютно бесплатные и доступны для скачивания без каких бы то ни было ограничений. Под каждым изображением есть ссылки на ресурсы, перейдя по которым, вы сможете подробно ознакомится с понравившимся набором иконок и при желании скачать.
Контурные иконки
Контурные или линейные иконки очень популярны в мире веб-разработки, так как отличаются особой простотой форм и минимализмом, не жертвуя при этом информативностью.
Бесплатные иконки от 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 ICON
В комплекте 512 иконок, библиотека регулярно пополняется.
Iconoo
Небольшая библиотека иконок на чистом CSS.
Наборы красочных разноцветных иконок
Цветные контурные иконки
Набор из 30 цветных линейных иконок в свежих пастельных тонах.
В комплект входят иконки в векторном формате (SVG) и PNG разных размеров.
Красочные иконки Ficons
120+ Бесплатных красочных иконок в формате PSD
Изометрические иконки
Коллекция из 30 плоских изометрических иконок. Все иконки, включенные в набор, полностью редактируются и настраиваются в Illustrator. В комплекте различные размеры PNG.
Форматы: AI, EPS, PNG
Размеры: 57px, 114px, 228px, 456px, 912px
Иконки для водных видов спорта
Набор из 24 разноцветных иконок с водной спортивной тематикой. Иконки поставляются в формате SVG и разработаны с использованием лёгкой, летней цветовой схемы и оптимальной масштабируемости.
Наборы иконок в материальном дизайне
Такие иконки призваны стать стандартными для приложений, выполненных в унифицированном стиле «материального» дизайна, который Google представила в версии Android 5.
Набор иконок Mini Material
Material Icons
Иконки материального дизайна с границами
250 иконок в Sketch формате
Google Material Иконки для Sketch
Это набор из 900+ иконок Google для приложения Sketch. Все они изначально из библиотеки Google, которая периодически обновляется и пополняется.
Иконки символов и пиктограмм
Бесплатные наборы иконок различных символов и пиктограмм.
Universal Themes — Набор векторных иконок
В комплект входит 100 векторных иконок, которые разработаны с учетом современных требований веб-дизайна, иконки представлены в формате SVG, поэтому вы сможете редактировать, масштабировать и изменять цвет иконок до тех пор, пока не получите нужный вам результат.
Многоцелевые иконки
Комплект из 90 симпатичных, многоцелевых иконок в форматах .
sketch и .ai
Dripicons v.2
Бесплатный набор иконок в форматах PSD, AI, EPS, PDF, SVG, Sketch, Webfont
70 Базовых векторных иконок
Хорошо проработанный бесплатный набор из 70 базовых иконок в двух вариантах, для светлого и тёмного фона. Файлы AI и SKETCH в комплекте.
Gonzocons 2.0
Бесплатная библиотека из 100 шрифт-иконок, также в архиве предоставлены все коды для демонстрационной страницы, форматы веб-шрифтов и .SVG-файлы.
Набор иконок пользовательского интерфейса
В набор пользовательского интерфейса UI включены 100 векторных иконок, которые разработаны с учетом особенностей пользовательских интерфейсов, иконки в формате SVG, контурные и цветные версии. Вы можете свободно использовать эти иконки в своих личных и коммерческих проектах.
Наборы графических и веб-дизайнерских иконок
Иконки с плоским графическим дизайном
Этот набор содержит 33 полностью масштабируемых векторных иконки в контурном стиле.
25 Иконок из категории дизайн фигур
Впечатляющий набор красивых иконок ручной работы, состоит из 25-ти легко редактируемых и готовых к использованию иконок, доступных абсолютно бесплатно. Поставляется в двух цветовых вариантах (mango & icicle) и всех удобных форматах: AI, EPS, SVG и PNG.
40 Бесплатных иконок для дизайнеров
Вы можете использовать эти иконки для личных и коммерческих проектов.
Форматы: AI, EPS, SVG, PNG
Размеры: 16 x 16, 32 x 32
Набор иконок художественных инструментов
Набор иконок графического дизайна
Иконки представлены во всех удобных для работы форматах: EPS, AI, SVG и PNG.
Комплекты плоских иконок
В этом разделе представлены бесплатные наборы иконок на самую различную тематику в лучших традициях плоского стиля. Использование плоских иконок в дизайне позволит сделать сайт или приложение стильным, современным и более понятным для пользователя.
Blobs
Flat Line — Набор иконок UX & eCommerce
83 иконки в плоском стиле для пользовательского интерфейса и электронной коммерции
Iconshock flat icons
По-настоящему огромная библиотека иконок в различных стилях для личного и коммерческого использования, в том числе большой выбор иконок в плоском дизайне. Бесплатно доступны иконки в разных размерах до 72px и в формате PNG. Вы можете скачать как весь пакет, так и каждую понравившуюся иконку по-отдельности, предварительно выбрав нужный вам размер
30 Иконок для рабочего пространства
Набор иконок для оформления рабочего пространства, представлен в свободный доступ в форматах AI & EPS.
70 Плоских иконок веб-интерфейса
В наборе представлены 70 различных иконок пользовательского интерфейса, в форматах SVG и PNG.
Наборы иконок для бизнеса и электронной коммерции
Иконки банка и денег
Набор из 36 бесплатных иконок для банков и денег, эти иконки с плоским стилем идеально подходят для приложений или веб-сайтов, связанных с банковой деятельностью. Иконки представлены в векторных формах(AI, PSD, EPS, PNG & SVG) и следовательно, легко редактируются и изменяются.
Набор иконок электронной коммерции
Набор выполнен в плоском стиле, в комплекте 50 ярких иконок, охватывающих все основные области электронной коммерции, включая иконки состояния корзины, иконки способов оплаты, доставки, иконки торговых категорий и многое, многое другое. Представлены иконки в двух форматах SVG и PNG, вы можете свободно использовать их в своих личных и коммерческих проектах.
Набор бизнес-иконок
50 красочных иконок в плоском стиле по бизнес тематике, представлены в форматах AI и SVG, поэтому их можно бесконечно масштабировать, не теряя при этом качества изображения, идеально подойдут для адаптивных веб-дизайнов. Вы можете свободно использовать их в своих личных и коммерческих проектах.
40 Иконок электронной коммерции
Бесплатный набор из 40 векторных иконок по теме электронной коммерции. Бесплатная версия содержит файлы форматов Adobe Illustrator (.ai), PDF и Encapsulated PostScript (.eps).
Наборы иконок на погодную тему
Пакет погодных иконок
Пакет иконок погодной тематики, содержащий 30 замечательно отрисованных иконок в форматах .png и .sketch. Отлично впишется в дизайн приложений и веб-сайтов о погоде.
Шрифт-иконки погоды
Большой пакет шрифт-иконок CSS с 222 иконками погоды, готовыми к подключению в Bootstrap или любой другой проект, для которого нужны высококачественные метеорологические иконки.
Набор регулярно обновляется и пополняется.
Конечно, представленные в подборке ресурсы, это лишь малая часть всего многообразия дизайнерских разработок представленных ранее и появившихся в течении этого года. Популярные и давно хорошо себя зарекомендовавшие ресурсы, в большинстве своём не нуждаются в представлении, так что в данном обзоре попытался выделить сравнительно новые и качественные работы. Надеюсь кому-нибудь пригодится.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Free Icons | Бесплатные иконки для сайта
Рады представить вам 30 иконок для обозначения жестов в использовании сенсорных устройств
— PSD + EPS vector files
— PNG в 5 разных размерах: 48px, 64 px, 128px, 256px and 512px
Скачать
Новые иконки 128×128, 256×256, 48×48, 512×512, 64×64, EPS, PSD
Этот набор экологических иконок был создан в Adobe Illustrator CS5, как масштабируемые векторы, что позволяет использовать их в различных размерах без потери качества.
Помимо масштабируемости иконки полностью редактируемые, что делает их идеально подходит для любого использования. Иконки доступны для использования в личных и коммерческих проектах.
Читать полностью…
Новые иконки AI, EPS
Пушистый сайт? Эти пушистые иконки социальных медиа будет идеальными для вашего сайта.Вы можете скачать шесть иконок бесплатно и использовать их в своих проектах без каких-либо ограничений.
Читать полностью…
Новые иконки PNG
Сегодня мы рады выпустить набор из 20 высококачественных иконок электронной коммерции в 64 × 64px, доступны в .png формате. Этот набор был разработан для использования в электронной коммерции веб-сайтов . В комплект входят значки пустой корзины, полной корзины, кредитные карточки, доставка, оплата, подарки, бумажник и другие.
Скачать
Без рубрики
Это бесплатный набор иконок, состоит из 14 иконок для основных социальных сетей.
Эти иконки хорошо выглядят на светлом или темном фоне, вы можете легко интегрировать в ваш сайт.
Вы также можете создавать свои собственные марки, используя специальный шаблон PSD.
Читать полностью…
Новые иконки PNG
Удивительный набор из 350 пиксельных иконок, которые идеально подходят для приложений и веб-сайтов. Вы можете использовать то для личного и коммерческого использования и масштабировать их до любого размера, который вам нужен.
Читать полностью…
Новые иконки PNG
7 футбольных иконок к чемпионату Европы!
Скачать
Скачать с templay.de
Новые иконки 128×128, 64×64, PNG
Это безусловно один из лучших бесплатных сетов социальных иконок, которые вы когда либо видели в интернете!
Скачать
Скачать с templay.
de
Новые иконки 128×128, 32×32, 64×64
Представляем вам 28 бесплатных иконок для веб-дизайнеров и блоггеров.
Скачать
Скачать с templay.de
Новые иконки 16×16, 32×32
Бесплатные иконки для сайта — ИТ Шеф
Статья, в которой рассматриваются 7 источников, с которых можно скачать бесплатные векторные значки для сайта.
Flaticon
Этот сайт содержит очень большое количество бесплатных векторных иконок. Для скачивания иконок не требуется регистрация. Также перед скачиванием можно выбрать цвет иконки. Кроме этого на сайте имеется бесплатный font-face генератор, который поддерживает следующие типы файлов: .ttf, .svg, .eot, .woff и .otf.
Перейти на flaticon.com
Iconfinder
Iconfinder содержит более 800000 значков.
Среди значков имеются как бесплатные, так и платные (премиум класса). Нахождение значков на данном ресурсе осуществляется с помощью формы поиска.
Перейти на iconfinder.com
All-free-download
All Free Download — это очень популярный сайт, который бесплатно позволяет получить такой контент как фотографии, значки, обои, PSD и др. При использовании контента этого сайта, не забывайте соблюдать условия лицензионного соглашения.
Перейти на all-free-download.com
Vecteezy
Vecteezy — это еще один популярный сайт, который позволяет бесплатно скачать векторные значки и картинки. Кроме бесплатного контента, здесь также присутствуют платные (премиум) коллекции. Поиск контента на сайте можно осуществлять как с помощью поиска так и посредством просмотра категорий.
Перейти на vecteezy.com
Pixeden
Pixeden предлагает различные веб-ресурсы. На сайте представлены темы, логотипы, фотографии, значки в формате шрифта, наборы иконок, векторные изображения и многое другое.
Сайт предлагает бесплатные и платные ресурсы. Для скачивания бесплатных ресурсов, регистрация не требуется.
Перейти на pixeden.com
Icons8
Этот сайт предлагает более 19000 бесплатных плоских значков с возможностью изменения у каждого из них цвета и размера. Перед скачиванием значков с Icons8 необходимо пройти процедуру регистрации.
Перейти на icons8.com
Vector Open Stock
Vector Open Stock предлагает множество графических ресурсов как бесплатных, так и платных (премиум класса). Сайт содержит интересные категории. Бесплатные элементы можно скачать без регистрации. Но необходимо обратить внимание на то, что использование бесплатного контента в коммерческих целях возможно потребует приобретение лицензии.
Перейти на vectoropenstock.com
Если Вы знаете ещё сайты, которые могут предложить бесплатные векторные значки, то поделитесь ими пожалуйста в комментариях.
Лучшие бесплатные наборы иконок на 2018 год
Автор: Елизавета Гуменюк Просто люблю писать, переводить и давать людям возможность читать интересный контент.
И пусть я не всегда идеальна — есть к чему стремиться!!!Есть определенные вещи в пользовательских интерфейсах, которые вечны. Какой бы ни была тенденция — скеоморфная, минималистичная, плоский дизайн — дизайнеры приспособятся к текущей ситуации. Одним из неотъемлемых кирпичиков в построении любого хорошего дизайна являются иконки.
В виде четкого графического представления, иконка естественно устраняет разрыв между веб-приложением и пользователем. Вам не нужны слова — иконка может сказать все за вас. Будь то просто минимальная пиктограмма в линейном стиле, такая как иконки от Swifticons или щедрые и яркие пиктограммы, такие как Material Icons Bundle от Iconshock, скорее всего, ваш пользователь получит правильное сообщение.
300+ Free Tech & Activities Icons от Swifticons
Material Icons Bundle
Хороший пользовательский опыт требует хорошо продуманного выбора иконок.
В зависимости от выбранного стиля, темы и цели, иконки могут быть сплошными или очерченными, монохромными или красочными, минималистичными или высокодетализированными, статичными или динамичными. Давайте рассмотрим некоторые из этих стилистических вариантов более тщательно.
Linecons – Free Vector Icons Pack
Linecons представляет собой набор замечательных бесплатных векторных иконок. Набор содержит 48 полностью масштабируемых векторных иконок в контурном стиле. Эти иконки можно использовать при создании веб-и мобильных интерфейсов. Они подойдут к любой тематике сайта или дизайну.
Mmmicons от Mint
Мы начинаем с самого популярного стиля за последние годы – полые иконки. Они повсюду. Веб-сайты, информационные панели и мобильные приложения заполнены очерченной графикой. Для начала этого пути, взгляните на Mmmicons от Mint. Имея в наличии 500 сортированных деталей представленных в различных стилях, набор преогромен.
Prometheus Free Icon Set от Тараса Шипка
Prometheus Free Icon Set от Тараса Шипка — это уникальный взгляд на классические интерпретации стиля. В то время как символы сделаны с помощью основных линий и пространства (или отрицательного пространства), они также приправлены крошечными красочными смещенными тенями, придающими каждому предмету необычный вид.
Сплошные и монохромные значки
В отличие от обрисованных иконок, сплошные — лучшая альтернатива, когда речь идет об интерфейсах с плохой контрастностью или большим количеством контента. Будучи визуально тяжелыми, они легко бросаются в глаза. Кроме того, они отлично подходят для модификаций, так как массивными формами легче манипулировать. Взгляните на IOS 11 UI Elements Vol 1 от Jemis Mali и Interface Icons.
IOS 11 UI Elements Vol 1
Бесплатные иконки от Jemis Mali поставляется в двух отдельных выпусках, но все же прекрасно сочетаемых. Вместе они охватывают все элементы, необходимые для интерфейсов на основе iOS.
Interface Icons
Набор от EverydayTemplate имеет более 200 иконок, представленных в двух стилях, толстых очертаниях и сплошных. Каждый элемент доступен в трех основных форматах: AI, EPS и PNG.
Красочные иконки
Красочные иконки никогда не стареют. В зависимости от тонов и оттенков, которые доминируют в этом году, дизайнеры создают свои бесплатные иконки. Например, Dusk UI Icons и The Color Icons Set используют модную мягкую пастельную палитру, которая просто великолепна.
Dusk UI Icons
Dusk UI более замысловатый и утонченный, чем Icon Set от Pixeden, который имеет скромный минималистский подход. Он также игривый и веселый, а второй — деловой и скромный.
The Color Icons Set
Social Media Icons и Radical Science Icons используют традиционную яркую окраску, но с некоторой изюминкой.
Social Media Icons
Набор от IconBunny порадует вас 14 стилистическими вариантами, включая как красочные, так и монохромные варианты.
Каждый значок поставляется в трех форматах: CDR, EPS и PNG.
Radical Science Icons
Иконки в пакете InvisionApp имеют прекрасную художественную атмосферу, очень похожую на маленькие иллюстрации. Художник подготовил иконки в шести форматах — AI, EPS, JPG, PDF, PNG и SVG — и три стилистических варианта — заполненные, плоские и очерченные.
Анимированные иконки
Анимированные иконки занимают особое место в нашей коллекции. Медленно, но верно мы привыкаем к динамическим элементам в интерфейсах, таким как зависание, параллакс и анимированные иконки. The small bundle от Icons8 предназначен для нестатической догмы. Тут вы найдете 60 динамических элементов в элегантном линейном стиле, которые идеально подходят для создания проектов, вдохновленных материальным дизайном.
The small bundle от Icons8
Как правило, первые форматы, которые приходят на ум, — это PNG, AI, PSD, EPS и Sketch. Однако есть еще два выбора, которые не только релевантны, но и более подходят для многих проектов.
Это SVG и WOFF или TTF.
Иконки SVG
Хотя SVG датируется 2000 годом, только недавно он стал популярным благодаря своей способности масштабироваться до любого размера без потери качества. Будучи XML-ориентированным форматом, его можно легко искать, индексировать, сжимать и даже анимировать. Посмотрите:
Simple Icons: пакет ориентирован на бренды. Здесь вы найдете массу известных логотипов, сделанных в четких твердых формах.
Feather Icons: пакет имеет различные иконки, которые выглядят изысканными и утонченными.
Evil Icons: это набор линейных иконок SVG, которые являются многоцелевыми. Хотя он довольно мал, но он может использоваться через Rails, Sprockets, Node.js, Gulp, Grunt и CDN.
Simple Icons
Feather Icons
Evil Icons
PathLove
В отличие от предыдущих наборов, которые имеют более хрупкую, чистую эстетику, PathLove — это набор ярких, мультяшных иконок.
Они забавные, игривые и просто восхитительные.
Иконочные шрифты
Иконочные шрифты замечательны по многим причинам. Во-первых, вы можете устанавливать стили с помощью CSS без Photoshop или любого другого программного обеспечения для редактирования изображений. Графика будет отлично смотреться на любом устройстве любого размера. Это элегантный способ включить иконографию. Хотя решение ограничено отсутствием разнообразия и стилистических выборов. Но для многих проектов этого достаточно. В нашем списке есть несколько веб-шрифтов.
Fontisto
Fontisto — это профессиональный веб-шрифт, который охватывает такие категории, как доступность, валюта, оплата, транспорт, электронная коммерция и другие. Есть более 500 символов.
Jam
Jam — это еще один веб-шрифт с огромной коллекцией пиксельных значков. Он имеет 422 предмета, выполненных в тонком стиле. Он разделен на такие группы, как сеть, направления, видео/аудио, текст и социальные сети.
Bicon и Devicons — менее впечатляющие наборы иконок, но все же они полезны. Оба бесплатных предложения включают около 200 наименований. В то время как Devicons немного тривиальный, у Bicon есть интересные символы, например, НЛО, дерево, видеокамера и так далее.
Bicon
Devicons
Иконки не так ограничены, как несколько лет назад. У нас есть много вариантов. Существуют разные форматы, разные размеры, разные стили и разные темы; они даже представлены в двух состояниях, статичных и динамических. Без сомнения, иконография стала более гибкой, адаптивной, универсальной и сложной.
Удачной работы!
Источник
Полное руководство по созданию интерфейсных иконок
Иконки являются важной частью любой системы дизайна или истории продукта. Иконки помогают нам быстро ориентироваться. Они независимы от языка. И самое приятное: они очень маленькие, поэтому они не занимают много места.
Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов. Они являются основным блоком иллюстративного контента, также являются высокотехнологичными.
Существует не так много людей, которые любят создавать иконки, и еще меньше тех, у кого это получается. Я написал это руководство, чтобы помочь вам стать одним из тех людей.
Независимо от того, являетесь ли вы экспертом по системам проектирования, иллюстратором или дизайнером продукта, это руководство поможет вам узнать, как создавать иконки, связывать их с вашим брендом и как внедрить их в вашу систему дизайна. Давайте начнем с основ.
Основные элементы значков
Размер
Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями. Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32.
Выберите общий размер для создания всех ваших иконок, а затем предоставьте им возможность масштабироваться до других размеров, которые могут понадобиться другим дизайнерам. Вы же не хотите создавать одну и ту же иконку снова и снова, только в разных размерах.
Когда вам понадобится комплексность глифа, именно тогда вы захотите добавлять другие размеры. У вас может быть значок базового продукта в 24px, а у маркетинговых значков – 80px из-за огромной разницы в использовании. Вы захотите добавить больше деталей для больших размеров.
Значок магазина в размерах 24×24, 40×40 и 80×80Когда создается одна и та же иконка разных размеров, я предпочитаю начинать с самого большого размера и идти на уменьшение. Мне гораздо проще удалять детали и упрощать, чем добавлять по мере роста. Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.
Цвет
Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.
Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.Сетки
Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически). Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь. Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне.
Слева: объекты на пиксельной сеткеМне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.
Прекрасно! Теперь, когда вы освоили пиксельную сетку, вы захотите узнать об оптической сетке. Оптическая сетка помогает нам определить, где находится центр масс значка, а также насколько он воспринимается человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте они были одинакового размера.
При построении моей оптической сетки, я предпочитаю делать отступы по краю, которые равны ширине моего штриха, или, возможно, в два раза шире, если я использую штрих в 1px. В приведенных ниже примерах вы можете видеть, как разные формы подходят к разным краям сетки.
Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально.
Доминирующий объект (прямоугольник) находится в центреЕсли вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди.
Штрихи и заливки
Помните, когда я сказал, что последовательность является ключевым моментом? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, где одна закрашена, а у другой выполнен только контур. Очень важно убедиться, что все ваши иконки оформлены одинаково. Например, у вас могут быть варианты применения заливки, чтобы показать, что что-то выделено, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант.
Как правило, заполненные значки имеют более высокий уровень узнаваемости. Значки выполненные лишь с помощью контура дают вам прекрасную возможность создавать крошечные детали. При выборе того, какой стиль является более подходящим, вы также должны учитывать общий вид своего бренда.
Если вы собираетесь создавать штриховые иконки, все штрихи должны быть одинаковой ширины. Я также рекомендую, чтобы расстояние между штрихами не было меньше, чем ширина вашего штриха.
Расстояние между штрихами должно по возможности быть равным ширине штрихаВозможно, у вас есть набор иконок, который соответствует одному стилю, но не другому. При создании закрашенных версий контурных значков вы захотите посмотреть, как можно упростить линейную работу. В идеале закрашенные значки напоминают тени, а не перевернутые линии. Создание контурных версий закрашенных значков включает в себя определение того, какую ширину контура вы можете использовать в этом пространстве и какие детали вы можете добавить, сохраняя при этом четкость.
Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.
Выбор стиля
Ваши значки являются отражением вашего бренда. Приступая к этой работе, важно понимать основные ценности вашего бренда и то, как они проявляются визуально. Некоторые прилагательные для размышления: жесткий/мягкий, обыденный/официальный, роскошный/экономичный и буквальный/абстрактный. У вас может быть визуализация стиля, на который вы можете ссылаться.
Некоторые значки кажутся простыми (X, меню гамбургеров, шеврон), но эти значки требуют того, чтобы вы уже понимали основные принципы вашей системы значков. Я рекомендую начинать с более сложных значков, чтобы помочь вам определить, какие правила вы хотите установить. Таким образом, как только вы начнете создавать простые иконки, это уже будет проще простого.
5 значков продуктов представлены в 5 стилях – обратите внимание, как небольшие различия делают каждый набор выдержанным и целостным.Вот подборка как продуктов, так и маркетинговых значков, которые представляют посыл и стиль визуального бренда компании:
Рисование значков
Геометрические фигуры
Если только я не создаю очень естественный, органичный стиль значков, то мне нравится начинать с основных форм, для создания формы моих иконок. Прямоугольники, квадраты и круги – отличные стартовые точки для создания более изящных значков.
Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).При рисовании геометрических форм, если вам нужно создать сложные многоугольники, вы можете начать с квадрата или прямоугольника или использовать инструмент «Перо» для перехода от точки к пикселю. При этом очень важно иметь четкую сетку, чтобы вы могли видеть, куда направляются эти точки.
Когда вам нужно нарисовать угловые геометрические фигуры, я не рекомендую просто использовать прямоугольник и вращать его. Вместо этого используйте пиксельную сетку, чтобы нарисовать ваши прямоугольники под углом
Слева: повернутый прямоугольник (точки не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает направление ваших точек к сетке).Естественные формы
Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса. Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.
Углы
Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.
Угловой радиус
При использовании этого для округления квадратов и прямоугольников, вы хотите убедиться, что все ваши углы имеют одинаковый радиус. При создании концентрических фигур вам необходимо отрегулировать радиусы углов, чтобы создать идеальные концентрические формы. Внутренние формы будут иметь меньший радиус, чем внешние формы.
Отличный образец концентрических радиусов в этом портфелеЛюбая промежуточная точка на пути может быть сглажена, с помощью свойства Угловой радиус в Инспекторе. Если вы выбираете весь путь, то он округляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.
Закрашенные объекты
Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.
Метафора
Метафоры важны в значках-мы используем их постоянно, даже не задумываясь. Значок дома обозначает домашнюю страницу. Насекомое означает ошибку. При масштабировании значков для создания уменьшенных версий, я предпочитаю помнить про метафору(смысл), которую я использую для передачи смысла значка.
Используйте общую метафору(смысл заложенный в вашем изображении), чтобы продолжить в меньшем размере, а не просто сделать точную иконку в меньшем масштабе. Когда общий контент выглядит не так как нужно, определите, какие детали наиболее важны, а затем удалите лишние. Если вы ограничены пространством, вы можете упростить важные детали, а не удалять их.Перспектива
Использование перспективы в иконках не всегда просто – их размер усложняет задачу, поскольку рисование в перспективе занимает дополнительное пространство. Если вы хотите использовать перспективу, либо используйте ее масштабно и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, в случае, когда это помогает повысить четкость и ясность.
Верхний ряд: плоский. Нижний ряд: в перспективе.Шрифт (избегайте!)
По возможности избегайте использование надписей для значков. Значки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его самостоятельно, а не используйте гарнитуру шрифта.
Подсказки
Операции Boolean
Логические операции объединяют любой набор слоев фигур с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение. Этот инструмент актуален и потрясающий. Это отличный способ сделать ваши иконки более изменяемыми. Вместо того, чтобы обрезать контуры, вы можете использовать функцию объединения. Не хотите искать пересечение фигур вручную? Попробуйте вычесть.
Группы Boolean обрабатываются как единый слой формы и имеют общие свойства заливки и обводки и могут комбинироваться с другими булевыми группами посредством последующих логических операций.
Объединение: объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из совокупности путей ее подслоев минус любые сегменты, которые перекрываются. Затем этот штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
Вычитание: противоположно объединению. Вычитание удаляет область фигуры или набора фигур из базовой фигуры. Только нижний слой формы является сплошным, остальные вычитаются из него.
Пересечение: создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
Исключение: является противоположностью пересечения. Исключение показывает только те области его подслоев, которые не перекрываются.
Когда я закончу со значками, мне бы хотелось создавать для них стили, так что, когда будущие дизайнеры корректируют цвет, легко вместо этого просто изменить одно свойство (заливку), вместо заливок и штрихов.
Сеть вектор
Векторные сети являются одной из самых уникальных функций в Figma. Большинство инструментов пера рисуют контуры в петле с определенным направлением, всегда желая восстановить соединение с их исходной точкой. Векторные сети не имеют направления и могут распадаться в разных направлениях, не требуя создания отдельного объекта пути. Сложные объекты могут быть созданы внутри одного и того же объекта и с теми же свойствами гораздо быстрее, чем они могут быть нарисованы с использованием традиционных векторных инструментов контура. Подробнее об этом можно прочитать в этой статье.
Как использовать иконки в системе дизайна
Обеспечение доступности набора значков для остальной части вашей команды – это вопрос организации, управления активами и осведомленности.
Организация
Давайте начнем с наименования файлов. Ваши иконки должны быть названы на основе того, что они показывают, а не того, что они представляют. Например, значок секундомера должен называться секундомер, а не скорость. Лампочку следует называть лампочкой, а не идеей. Вы хотите, чтобы люди сразу поняли, что такое значок, а не то, что он передает на более концептуальном уровне. Желательны короткие названия. Когда вам нужно несколько слов, используйте тире, чтобы отделить их.
Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.Со временем вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как и фреймы, с небольшой уловкой, которая дублирует компонент, создавая новые экземпляры, а не копии. Это означает, что вы можете иметь гигантскую библиотеку со всеми вашими значками, а когда вам понадобится ее использовать, вы создаете экземпляр из библиотеки. Если кто-то внесет изменения в оригинал, ваши значки будут обновлены. Вам может понадобится искать эти активы, поэтому вы можете добавить информацию для поиска. Но вместо того, чтобы поместить это в имя файла, есть альтернатива. Figma имеет окно описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, не делая сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!
Чтобы помочь своим инженерам, вы захотите использовать как фреймы, так и страницы. Страницы представляют наиболее удаленную группу (поэтому мне нравится сортировать их по размеру). Затем фреймы помогут вам сузить содержание, как в примере ниже. Система именования этого значка имеет размер> категория> имя файла.
Когда есть один и тот же значок в разных вариациях, вот как мне нравится обрабатывать их.
Различные размеры: Используйте разные страницы, так как вы редко будете переключаться напрямую с одного экземпляра на другой.
Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.
Слева: кофе / контурный. Справа: кофе / закрашенныйСкорректированные изображения: если у вас есть значок с визуальным вариантом (например, с несколькими вариантами валюты), вы также можете использовать наименование, чтобы помочь дифференцировать, используя тот же метод, что и закрашенные и контурные значки.
Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»Управление вашими активами
Когда вы закончили работу над своими знчками, вы хотите, чтобы они были максимально чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить вашу работу (помните, наш друг Объединение?). Избегайте лишних линий или форм. Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы другой человек посмотрел на все ваши значки и дважды проверил чистоту.
Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте. Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.
Передача ваших значков в другие руки
Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт. Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть. Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.
Другие источники
- Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
- Я люблю thenounproject.com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)
10 бесплатных наборов иконок
В интернете огромное количество сайтов с иконками, и авторы со всего мира ежедневно добавляют на них всё новые и новые наборы, которые можно скачать и использовать. Глаза разбегаются! Но оцепенение быстро проходит, когда стараешься найти действительно качественные и уникальные иконки: утонченной формы, под конкретный запрос и желательно все в едином стиле.
Мы собрали для вас 10 наборов иконок, которые точно пригодятся в разных проектах. Скачивайте, сохраняйте и используйте!
1. Essential Set Icon pack
Базовый набор для работы над презентацией. 380 иконок в контурном стиле с закругленными краями на основные темы: люди, бизнес, маркетинг, интерфейсы, стратегические планы.
2. City Icon pack
Незаменимый набор, когда нужно показать схему логистики или сеть офисов в городе: 102 контурные иконки с городскими зданиями и образами, с которыми ассоциируется каждый мегаполис.
3. Education icon pack
Качественный набор иконок на тему современного образования: 100 разных иконок, которые помогут найти сюжет для иллюстрации разных моментов, от первого учебного дня до получения диплома.
4. Weather Icon Pack
У природы нет плохой погоды, а вот некачественных изображений на эту тему в интернете достаточно. Поэтому делимся 50 классными иконками, которые помогут вам и в грозу, и в солнечный день.
5. Artificial intelligence Icon Pack
В вашей презентации нужно рассказать про новые диджитал технологии? Про Биг дату, цифровую трансформацию или искусственный интеллект? В этом наборе на 100 иконок есть всё, чтобы с помощью вашей презентации выйти на ICO!
6. Industry Icon Pack
Этот небольшой набор не раз выручит вас, если нужно будет сделать презентацию о металлургии, строительстве или фабричном производстве. 36 иконок, зато не придется долго подбирать нужную ассоциацию, бесконечно прокручивая содержимое папки.
7. Gastronomy Collection
Проголодались? Этот вкусный набор из 230 иконок поможет подобрать нужную картинку для простых ингредиентов блюд в меню кофейни за углом и шикарных рецептов в мишленовском ресторане.
8. Contact us icon pack
Полноценный набор для завершения корпоративных презентаций. 50 иконок в едином стиле помогут проиллюстровать слайд «Наши контакты» на полную мощность. Покажите вашим клиентам, что можно прислать информацию на факс, мобильный телефон, в почтовый ящик или оставить заявку на сайте.
9. Emoji Icon Pack
Вашей презентации не хватает эмоций? Используйте Emoji из этого набора! 50 яркий и качественных картинок смогут передать нужное настроение и развеселить аудиторию.
10. Goodstuffnononsense
Если вы делаете презентацию в стиле скетчей, этот набор точно пригодится. Качественные контуры, запоминающаяся стилистика и 3 цветовых решения в наборе из 350 иконок. Можно найти как абстрактные, так и точные образы, например логотипы всех известных социальных сетей.
Когда вы скачаете эти наборы, мы советуем использовать программы для хранения и редактирования иконок:
IconJar
Удобный органайзер иконок для Mac. Хранит все иконки и обеспечивает простоту работы — легко просматривать и экспортировать их перетаскиванием. Сервис платный — 29.99€. Но стоит своих денег.
SVG Explorer
Расширение для Windows. Позволяет увидеть иконки в разрешении SVG в проводнике Windows, не открывая их.
Бесплатные иконки для соцсетей: 30+ наборов
Иконки соцсетей – это графические элементы с логотипами популярных платформ. Они представляют собой прямые ссылки на аккаунты компаний в социальных сетях. При добавлении их на сайт всегда необходимо проверять условия их использования.
К счастью, в сети можно найти множество бесплатных наборов таких изображений. В этой статье мы собрали больше 30 вариантов от дизайнеров по всему миру.
Vecteezy – это большая библиотека, где все иконки собраны в папках по типам файлов. Среди доступных форматов – SVG, EPS, & PNG и не только.
Набор из 12 иконок, оформленных в виде круглых кнопок.
Эти изображения будут отлично смотреться на любом фоне благодаря круглой белой рамке.
Иконки из данного набора представлены в нескольких размерах. Всего пользователям доступно 25 изображений.
Этот набор будет отлично смотреться на любом фоне – как на светлом, так и на темном. Доступно в общей сложности 168 иконок.
Набор из 23 изображений в формате PNG, ICO и BMP.
Эти иконки оформлены в виде стикеров. В набор входит 12 изображений.
8 круглых иконок в форматах PNG и PSD.
Еще один большой набор изображений. Всего 110 иконок.
Данные иконки можно объединять при помощи Divi Builder. Пользователям доступны практически все геометрические формы. Кроме того, их можно кастомизировать согласно нуждам сайта.
По ссылке в заголовке вы найдете набор ярких иконок, которые можно использовать в самых разных целях.
Данный набор креативов может быть полезен при разработке и создании приложений. Все иконки можно изменять в графических редакторах.
Иконки в данном наборе представлены в нескольких стилях: круглые, многоугольные, прямоугольные, с закругленными углами, в форме капли и не только. Доступны форматы AI, EPS, SVG и PNG.
Данные иконки выглядят так, как будто были нарисованы от руки. В набор входит около 20 изображений.
Это набор иконок с длинной тенью, которая призвана сделать их плоский дизайн объемнее.
Круглые значки соцсетей отлично подойдут для блога или информационного сайта. Иконки из данного набора разработаны профессиональными дизайнерами и не требуют изменений.
Треугольные иконки – отличный выбор, если вы хотите немного освежить дизайн сайта. В набор входит 20 изображений.
Данные значки выглядят несколько мультяшно и по-детски. Возможно, самой удачной областью их применения станет мобильный дизайн.
Еще один отличный вариант для блогов. Дизайн данных иконок довольно лаконичный и отлично впишется как в ресурсы, оформленные в темных тонах, так и в светлых.
Данные иконки вписаны в симметричные фигуры. Их можно изменять, а также создавать на их основе собственные изображения.
Плоского дизайна много не бывает. Данный набор иконок включает в себя 20 изображений в соответствующем стиле.
Набор из более чем 270 иконок круглой формы. Коллекция постоянно пополняется.
Еще один набор плоских иконок с удлиненными тенями. Всего доступно 14 изображений.
В этом наборе вы найдете прекрасно детализированные изображения, которые представляют собой более «реалистичные» версии стандартных иконок соцсетей.
Довольно лаконичный набор – все иконки выполнены в одном цвете с черными рамками. Всего доступно 12 значков.
Набор контрастных социальных значков с фоном, который кажется прорисованным от руки. Пользователям доступны 20 изображений.
Набор из 15 стильных иконок, оформленных в виде марок. Доступны в форматах PNG и PSD.
Эти иконки могут стать интересной деталью вашего сайта, если использовать их правильно. Небанальный дизайн также может повысить количество кликов.
Яркие иконки соцсетей наложены на фон, имитирующий древесину. Отлично подойдут для мобильных игр и блогов.
Еще один набор иконок-скетчей. Отлично будут смотреться в блогах и везде, где вы сочтете их уместными.
Прозрачные кнопки отлично впишутся в дизайн практически любого сайта, не перегружая его лишними элементами.
Заключение
В сети можно найти множество наборов иконок соцсетей на любой вкус. Мы же собрали для вас стартовый набор, который включает в себя как универсальные изображения, так и более специфические. Надеемся, они пригодятся вам в новом году.
Источник: vandelaydesign.com
Оптимизация иконок и иллюстраций | Лучший выбор для дизайнеров [90,000+]
Не беспокойтесь. Мы создали 13 наборов и более 23000 иллюстраций с наиболее часто используемыми темами в приложениях и на веб-сайтах. Наши иллюстрации наполнены индивидуальностью. Они могут выглядеть веселыми и дружелюбными, но оказывают серьезное влияние.
BROOKLYN | 1100 иллюстраций
Модный городской стиль, легко адаптируемый к вашему бренду с помощью акцентного цвета.
барселона | 850 иллюстраций
НОВИНКА
Творческий стиль, полный энергии, веселья и красок.
MILANO | 930 иллюстраций
НОВИНКА
Минималистичный и тонкий, почти поэтический стиль.
DJAKARTA | 220 иллюстраций
Милый и женственный стиль с реалистичными пропорциями и яркими цветами.
BETA
ТОКИО | 60 иллюстраций
Более реалистичный стиль с четкими линиями и приглушенными пастельными тонами.
BETA
STREAMLINE UX — МНОГОЦВЕТНЫЙ | 9300 иллюстраций
Дружественный и красочный стиль, готовый для использования в слайд-колодах, контенте и приложениях.
STREAMLINE UX — ДУОТОН | 5 200 иллюстраций
Этот стиль с едва уловимым всплеском цвета идеально подходит для адаптации к руководящим принципам вашего бренда.
STREAMLINE UX — LINE | 5 150 иллюстраций
Простой, легкий стиль с удаленными тенями и фоном.
СЕУЛ | РАБОТА В ПРОЦЕССЕ
Веселый и супер-кавайный стиль! Вдохновленный японским и корейским стилями комиксов. 🌈🦄
БАНГАЛОР | РАБОТА В ПРОЦЕССЕ
Воздушный и абстрактный стиль, минималистичный и элегантный.Легко адаптировать к вашему бренду или проектам, так как он использует только два цвета.
СОФИЯ | РАБОТА В ПРОЦЕССЕ
Плоский и четкий стиль с яркими цветами и современной интерпретацией.
ЛОНДОН | РАБОТА В ПРОЦЕССЕ
Городской стиль с реалистичными пропорциями и плавным стилем. Легко адаптировать к вашему бренду, поскольку мы используем только три цвета.
БРЮКСЕЛЬ | РАБОТА В ПРОЦЕССЕ
Вдохновленный стилем «Линия Клэр», популяризированным бельгийским комиксом «Тинтин», он фокусируется на красоте и простоте линейных рисунков, сохраняя цвета легкими и нежными.
Оптимизация иконок и иллюстраций | Лучший выбор для дизайнеров [90,000+]
Не беспокойтесь. Мы создали 13 наборов и более 23000 иллюстраций с наиболее часто используемыми темами в приложениях и на веб-сайтах. Наши иллюстрации наполнены индивидуальностью. Они могут выглядеть веселыми и дружелюбными, но оказывают серьезное влияние.
BROOKLYN | 1100 иллюстраций
Модный городской стиль, легко адаптируемый к вашему бренду с помощью акцентного цвета.
барселона | 850 иллюстраций
НОВИНКА
Творческий стиль, полный энергии, веселья и красок.
MILANO | 930 иллюстраций
НОВИНКА
Минималистичный и тонкий, почти поэтический стиль.
DJAKARTA | 220 иллюстраций
Милый и женственный стиль с реалистичными пропорциями и яркими цветами.
BETA
ТОКИО | 60 иллюстраций
Более реалистичный стиль с четкими линиями и приглушенными пастельными тонами.
BETA
STREAMLINE UX — МНОГОЦВЕТНЫЙ | 9300 иллюстраций
Дружественный и красочный стиль, готовый для использования в слайд-колодах, контенте и приложениях.
STREAMLINE UX — ДУОТОН | 5 200 иллюстраций
Этот стиль с едва уловимым всплеском цвета идеально подходит для адаптации к руководящим принципам вашего бренда.
STREAMLINE UX — LINE | 5 150 иллюстраций
Простой, легкий стиль с удаленными тенями и фоном.
СЕУЛ | РАБОТА В ПРОЦЕССЕ
Веселый и супер-кавайный стиль! Вдохновленный японским и корейским стилями комиксов. 🌈🦄
БАНГАЛОР | РАБОТА В ПРОЦЕССЕ
Воздушный и абстрактный стиль, минималистичный и элегантный. Легко адаптировать к вашему бренду или проектам, так как он использует только два цвета.
СОФИЯ | РАБОТА В ПРОЦЕССЕ
Плоский и четкий стиль с яркими цветами и современной интерпретацией.
ЛОНДОН | РАБОТА В ПРОЦЕССЕ
Городской стиль с реалистичными пропорциями и плавным стилем.Легко адаптировать к вашему бренду, поскольку мы используем только три цвета.
БРЮКСЕЛЬ | РАБОТА В ПРОЦЕССЕ
Вдохновленный стилем «Линия Клэр», популяризированным бельгийским комиксом «Тинтин», он фокусируется на красоте и простоте линейных рисунков, сохраняя цвета легкими и нежными.
Оптимизация иконок и иллюстраций | Лучший выбор для дизайнеров [90,000+]
Не беспокойтесь. Мы создали 13 наборов и более 23000 иллюстраций с наиболее часто используемыми темами в приложениях и на веб-сайтах.Наши иллюстрации наполнены индивидуальностью. Они могут выглядеть веселыми и дружелюбными, но оказывают серьезное влияние.
BROOKLYN | 1100 иллюстраций
Модный городской стиль, легко адаптируемый к вашему бренду с помощью акцентного цвета.
барселона | 850 иллюстраций
НОВИНКА
Творческий стиль, полный энергии, веселья и красок.
MILANO | 930 иллюстраций
НОВИНКА
Минималистичный и тонкий, почти поэтический стиль.
DJAKARTA | 220 иллюстраций
Милый и женственный стиль с реалистичными пропорциями и яркими цветами.
BETA
ТОКИО | 60 иллюстраций
Более реалистичный стиль с четкими линиями и приглушенными пастельными тонами.
BETA
STREAMLINE UX — МНОГОЦВЕТНЫЙ | 9300 иллюстраций
Дружественный и красочный стиль, готовый для использования в слайд-колодах, контенте и приложениях.
STREAMLINE UX — ДУОТОН | 5 200 иллюстраций
Этот стиль с едва уловимым всплеском цвета идеально подходит для адаптации к руководящим принципам вашего бренда.
STREAMLINE UX — LINE | 5 150 иллюстраций
Простой, легкий стиль с удаленными тенями и фоном.
СЕУЛ | РАБОТА В ПРОЦЕССЕ
Веселый и супер-кавайный стиль! Вдохновленный японским и корейским стилями комиксов. 🌈🦄
БАНГАЛОР | РАБОТА В ПРОЦЕССЕ
Воздушный и абстрактный стиль, минималистичный и элегантный. Легко адаптировать к вашему бренду или проектам, так как он использует только два цвета.
СОФИЯ | РАБОТА В ПРОЦЕССЕ
Плоский и четкий стиль с яркими цветами и современной интерпретацией.
ЛОНДОН | РАБОТА В ПРОЦЕССЕ
Городской стиль с реалистичными пропорциями и плавным стилем. Легко адаптировать к вашему бренду, поскольку мы используем только три цвета.
БРЮКСЕЛЬ | РАБОТА В ПРОЦЕССЕ
Вдохновленный стилем «Линия Клэр», популяризированным бельгийским комиксом «Тинтин», он фокусируется на красоте и простоте линейных рисунков, сохраняя цвета легкими и нежными.
Лучшие наборы бесплатных иконок
Поиск бесплатных иконок — это трудоемкий процесс, который часто не приносит много сокровищ.Иконки являются важным компонентом дизайна, но создание пользовательских иконок также требует времени. Вот почему мы вмешались, чтобы помочь вам.
В этом посте мы выбрали большой выбор бесплатных иконок, а также перечислили места, где вы можете найти свои собственные. Надеюсь, вы найдете хотя бы несколько наборов, которые подойдут для ваших дизайнерских проектов, будь то личные или коммерческие. Вам нужны новые шрифты, чтобы сочетаться с вашими новыми блестящими значками? Ознакомьтесь с нашей публикацией о бесплатных шрифтах.
01.Космические иконки
(Изображение предоставлено Агатой)Создатель Агата назвал этот набор из 77 созданных вручную значков контурными, цветными и наклейками незаменимым для всех поклонников научной фантастики. В набор входят все символы космоса, которые вы только можете себе представить. Вы можете использовать их в личных или коммерческих проектах, только не забудьте указать художника. Также есть раздел фан-арта, но вас предостерегают от использования его в коммерческих проектах из-за законов об авторском праве.
Сайт Агаты, Good Stuff No Nonsense, содержит множество других наборов значков, некоторые бесплатные, а некоторые платные.Стоит также ознакомиться с другими ее работами. На сайте также есть наборы значков, такие как «Жуткий» и «Бизнес».
02. Social Materia
Этот удобный набор значков охватывает большую часть социального ландшафтаЕсли вам нужно много значков в стиле материала и у вас есть 42 доллара, прожигающие дыру в вашем кармане, то набор Materia из 3120 элементов — это прекрасно. выбор, особенно для Android. Но если все, что вам нужно, это набор социальных иконок, то вы можете подобрать эту небольшую партию бесплатно!
03. Значки уведомлений для Adobe XD
Значки Burnt Toast сочетаются со знакомыми предупреждениями и значкамиКанадский иллюстратор Скотт Мартин, известный также как Burnt Toast Creative, создал этот набор значков на тему уведомлений, когда у него была возможность сотрудничать с Adobe XD .Разработанные с учетом простоты, 12 значков представляют собой игру с предупреждениями и значками из приложений, с которыми мы все знакомы.
04. Citysets
Зачем ехать в Лондон, если можно просто посмотреть на эти значки?Постоянный побочный проект лондонского цифрового дизайнера Брина Тейлора, Citysets — это постоянно расширяющаяся коллекция бесплатных векторных иконок, которые призваны обеспечить наглядный путеводитель по городам по всему миру. На данный момент существует шесть наборов — Сан-Франциско, Манчестер, Лондон, Нью-Йорк, Париж и Сидней, — каждый из которых содержит около 20 икон.
05. 80 значков дикой природы
Значки животных Freepik восхитительно минималистичныЭтот фантастический набор из 80 значков дикой природы выглядит совершенно чистым и минималистичным, но при этом удивительно выразительным. Это работа Freepik, и бесплатная загрузка включает в себя значки как в формате PNG, так и в исходных векторных файлах SVG.
06. Цветные значки в виде точек и квадратов
Мельчайшие оттенки цвета оживляют эти векторные значкиЕсли вам нравится небольшой всплеск цвета на ваших значках, но вы не хотите заходить слишком далеко, этот набор от Iconshock может будь именно тем, что ты ищешь.Его идеальные по пикселям значки в основном монохромные, но оживлены привлекательными штрихами цвета и представлены в форматах AI, SVG и EPS.
07. 30 изометрических значков
Эти изометрические красоты не только для бухгалтеровЭтот набор из 30 изометрических значков был создан для бухгалтерской отрасли, но в нем есть некоторые потрясающие элементы, которые можно легко превратить в более общее использование, если вы так склонны.
08. iconmonstr
Вы можете легко скачать бесплатные значки на iconmonstrВеб-сайт iconmonstr — отличное место для поиска черно-белых векторных иконок.Они доступны в различных размерах, и вы можете скачать их в формате .PNG или .SVG.
09. Поиск значков
Поиск значков в разделе «Поиск значков» — нет ничего проще, чем этот«Найти значки», который помогает отслеживать все, от плоских черно-белых значков до цветных трехмерных значков. Откройте для себя то, что вы ищете, с помощью поиска по цвету, цвету фона и даже стилю.
10. Icon Archive
Система рейтингов Icon Archive поможет вам решить, какие бесплатные значки загружать.В Icon Archive вам придется до определенной степени отсортировать зерна от плевел, но вы можете сортировать значки по цвет, цвет фона, размер, стиль и категория, а также загрузите файлы PNG четырех разных размеров.
11. The Noun Project
The Noun Project предлагает бесплатные иконки, посвященные схожей эстетике.Набирая все большую популярность и популярность, цель Noun Project состоит в том, чтобы предоставить иконки, которые имеют одинаковую и последовательную эстетику. Это похоже на «бесплатный набор значков», дополненный областью поиска, красивым пользовательским интерфейсом и фантастическим дизайном значков.
12. IconToucan
IconToucan позволяет перетаскивать и загружать любые бесплатные значки, которые вам нравятся.Основным преимуществом IconToucan является удобство.Сайт позволяет быстро просматривать прозрачные значки в формате PNG, а затем перетаскивать их в ящик в правой части страницы. Внизу отображается список этих значков, которые вы выбрали, и одним щелчком мыши вы можете загрузить все бесплатные значки, которые вы выбрали, сразу в файл ZIP-архива.
13. Fontello
Создавайте собственные веб-шрифты иконок с помощью этого простого композитораЭтот сайт позволяет вам создавать свои собственные бесплатные веб-шрифты иконок. Вы в основном выбираете «глифы» значков, которые хотите использовать в своем шрифте, из нескольких разных (действительно хороших) коллекций.Вы можете изменить размеры пикселей, настроить имена файлов и загрузить пакет веб-шрифтов. Все сгенерировано через сайт и готово к публикации на вашем.
14. Socialico
Socialico предлагает пакет из 74 бесплатных иконок для использования в социальных сетяхЧисло и разнообразие социальных сайтов постоянно увеличивается. Кажется, что каждому веб-дизайнеру нужны хорошие значки социальных сетей, и эта коллекция предоставляет некоторые из наиболее распространенных (Facebook и Twitter) более нишевым (Dribbble и deviantART).Бесплатные значки поставляются в виде шрифта, причем значки представлены как в форме круга, так и без круга
15. Современные пиктограммы
Современные пиктограммы поставляются с набором бесплатных значковШрифт OpenType для загрузки, это бесплатное предложение предоставляет привлекательный выбор бесплатных иконок. Дизайны были созданы с простотой и компетентностью людьми из Design Office и доступны на популярном сайте бесплатных шрифтов Font Squirrel. (Иконки, по-видимому, хорошо смотрятся в сочетании с Helvetica.)
16. FlatIcon
FlatIcon предлагает более 184 000 значковЕсли вам нужно много-много плоских значков, тогда этот проект FreePik поможет вам сразу, предлагая 19 500 пакетов значков бесплатно, что в сумме составляет более 736 000 бесплатные иконки как для личного, так и для коммерческого использования.
Следующая страница: более фантастические бесплатные наборы иконок
Оптимизация иконок и иллюстраций | Лучший выбор для дизайнеров [90,000+]
Не беспокойтесь. Мы создали 13 наборов и более 23000 иллюстраций с наиболее часто используемыми темами в приложениях и на веб-сайтах.Наши иллюстрации наполнены индивидуальностью. Они могут выглядеть веселыми и дружелюбными, но оказывают серьезное влияние.
BROOKLYN | 1100 иллюстраций
Модный городской стиль, легко адаптируемый к вашему бренду с помощью акцентного цвета.
барселона | 850 иллюстраций
НОВИНКА
Творческий стиль, полный энергии, веселья и красок.
MILANO | 930 иллюстраций
НОВИНКА
Минималистичный и тонкий, почти поэтический стиль.
DJAKARTA | 220 иллюстраций
Милый и женственный стиль с реалистичными пропорциями и яркими цветами.
BETA
ТОКИО | 60 иллюстраций
Более реалистичный стиль с четкими линиями и приглушенными пастельными тонами.
BETA
STREAMLINE UX — МНОГОЦВЕТНЫЙ | 9300 иллюстраций
Дружественный и красочный стиль, готовый для использования в слайд-колодах, контенте и приложениях.
STREAMLINE UX — ДУОТОН | 5 200 иллюстраций
Этот стиль с едва уловимым всплеском цвета идеально подходит для адаптации к руководящим принципам вашего бренда.
STREAMLINE UX — LINE | 5 150 иллюстраций
Простой, легкий стиль с удаленными тенями и фоном.
СЕУЛ | РАБОТА В ПРОЦЕССЕ
Веселый и супер-кавайный стиль! Вдохновленный японским и корейским стилями комиксов. 🌈🦄
БАНГАЛОР | РАБОТА В ПРОЦЕССЕ
Воздушный и абстрактный стиль, минималистичный и элегантный. Легко адаптировать к вашему бренду или проектам, так как он использует только два цвета.
СОФИЯ | РАБОТА В ПРОЦЕССЕ
Плоский и четкий стиль с яркими цветами и современной интерпретацией.
ЛОНДОН | РАБОТА В ПРОЦЕССЕ
Городской стиль с реалистичными пропорциями и плавным стилем. Легко адаптировать к вашему бренду, поскольку мы используем только три цвета.
БРЮКСЕЛЬ | РАБОТА В ПРОЦЕССЕ
Вдохновленный стилем «Линия Клэр», популяризированным бельгийским комиксом «Тинтин», он фокусируется на красоте и простоте линейных рисунков, сохраняя цвета легкими и нежными.
20 мест, где можно получить бесплатные значки веб-сайтов
Не знаете, где искать лучшие бесплатные значки веб-сайтов? Ваш поиск заканчивается здесь! Читайте список лучших мест для бесплатных веб-иконок, которые вы можете скачать сегодня.
Использование правильных значков имеет первостепенное значение для интуитивно понятного дизайна веб-сайта и удобства использования. Иконки могут действительно повлиять на работу ваших пользователей, в лучшую или в худшую сторону. Они могут доставить вашим пользователям удовольствие и увлекательный опыт или заставить их почувствовать, будто они путешествуют по Бермудскому треугольнику.
Загрузите Justinmind для культового веб-дизайна с идеальным пиксельным дизайном
Скачать бесплатноЧтобы добавить еще один гаечный ключ в работу, огромное разнообразие веб-сайтов, предлагающих бесплатные значки веб-сайтов для загрузки, может действительно затруднить вам выбор наилучшего варианта.Иногда чувствовать себя избалованным выбором приятно, а иногда — просто разочаровывать людей с плотным графиком.
Тогда у вас есть множество доступных форматов файлов. Большой вопрос здесь в том, что вам подходит? Наиболее распространенными предлагаемыми форматами являются PNG и SVG. Многие из них также доступны в виде фрагментов HTML-кода. PNG — это в основном растеризованные изображения, и если они не подходят по размеру для текущего проекта, вы потеряете качество при их изменении. SVG имеют тенденцию попадать в золотую середину, поскольку они полностью масштабируемы, что дает вам возможность регулировать размер по мере необходимости в вашем любимом инструменте прототипирования.
Всех этих вариантов и форматов файлов достаточно, чтобы вызвать у вас головную боль, когда вы думаете о правильных значках, которые понадобятся для вашего следующего прототипа веб-сайта. Вот почему мы собрали 20 лучших мест, где можно быстро загрузить набор масштабируемых бесплатных значков веб-сайтов для вашего следующего дизайна, чтобы вы могли вернуться к более широкой картине.
Простое попадание на главную страницу этого веб-сайта вселяет в вас уверенность в том, что эти ребята знают, что делают, когда дело доходит до бесплатных значков для веб-сайтов.
Вы обнаружите, что значки на Streamline Icons бывают трех разных типов или «веса». Отмечена разница между их светлыми, обычными и жирными значками, при этом более светлые значки более геометрические и минималистичные, в отличие от жирных значков с глифами, которые больше напоминают рекомендации Apple по человеческому интерфейсу.
Вы можете загружать значки с этого сайта в пакетах в формате SVG, PNG или PSD, и существует не менее 10 500 разновидностей значков трех разных весов, разделенных на 53 категории.Вы обязательно найдете здесь то, что вам нужно!
Загружаемый формат: SVG, PNG и PSD
Flat Icon, как следует из названия, — отличное место, где можно остановиться за бесконечными списками бесплатных плоских иконок. Предлагается около 60 категорий и тысячи бесплатных значков веб-сайтов для загрузки в каждой, поэтому мы говорим, что вы не ошибетесь.
В каждой категории вы можете отфильтровать цвет между монохромным и многоцветным. Вы также можете изменить их цвет, как захотите, после их загрузки.Вы можете скачать все бесплатные иконки веб-сайтов в форматах SVG и PNG.
Если вы ищете идеальный набор плоских иконок для своего веб-сайта, даже если он ориентирован на нишевый рынок, Flat Icon поможет вам.
Загружаемый формат: SVG и PNG
Iconfinder имеет более 17 200 бесплатных иконок для веб-сайтов, которые ждут вас для загрузки. Лучшая часть? Все они векторные, а это значит, что вам просто нужно скачать и масштабировать их в соответствии с дизайном интерфейса вашего веб-сайта.
Еще одна интересная особенность этого веб-сайта — бесплатный редактор изображений, который позволяет изменять размер, перекрашивать и даже перерисовывать каждое изображение по своему вкусу перед загрузкой в формате SVG — приятное прикосновение!
Загружаемый формат: SVG
Vecteezy поставляется с множеством различных бесплатных иконок веб-сайтов, которые можно загружать по отдельности в виде SVG. Не менее привлекательным является количество предлагаемых стилей, таких как одноцветный и многоцветный, монохромный и дуохромный, плоские значки и глифы.
На этом веб-сайте есть бесплатные значки для любого случая, ищете ли вы веселые, красочные и модные значки или что-то более функциональное или серьезное, этот веб-сайт поможет вам разобраться. Просто убедитесь, что вы указали авторство, если скачиваете бесплатно!
Загружаемый формат: SVG
Icofont может похвастаться привлекательным набором категорий для бесплатных иконок веб-сайтов, каждая из которых имеет цветовую кодировку, чтобы различать категории. Каждая категория имеет минималистский дизайн и одноцветный, но все же стильный и немного более детализированный, чем средний глиф.
Среди доступных категорий: веб-приложение, бренд, направленная (для навигации), социальная, медицинская, погода, спорт, путешествия, образование и многие другие. Вы можете загрузить каждый значок как отдельный файл SVG или как код разметки.
Загружаемый формат: SVG и HTML
Вы можете рассматривать Iconstore как источник бесплатных иконок для веб-сайтов. На этом веб-сайте собрана коллекция лучших бесплатных веб-иконок.
Вы можете найти бесплатные векторные иконки веб-сайтов для множества различных целей, будь то для развлечения, например, социальные или игровые веб-сайты, или более серьезные веб-сайты, например, для банковского дела или недвижимости.
Однако вы обнаружите, что не все бесплатные значки веб-сайтов на этом сайте можно загрузить в одном и том же формате. Некоторые из них доступны в виде наборов SVG, а другие можно загрузить только в формате JPG или PNG, которые вы можете изменять в Photoshop.
Загружаемый формат: SVG, PNG и PNG
Boxicons дает вам доступ к 1066 бесплатным значкам веб-сайтов в формате SVG, которые можно загрузить за секунду в виде полного пакета или по отдельности. Эти простые плоские значки и глифы содержат как функциональные, так и забавные элементы, каждый из которых имеет обычный геометрический рисунок или жирный формат глифов.
Вы можете получить бесплатные веб-иконки для любых категорий, которые только можно вообразить, таких как финансы, электронная коммерция, логотипы, бренды, смайлики, а также функциональные значки, такие как доступность и полезность.
Загружаемый формат: SVG
На Linearicons вы можете воспользоваться бесплатным пакетом иконок для веб-сайтов, содержащим до 170 векторных изображений. Этот сайт отлично подходит, если вы ищете простые, плоские и геометрические бесплатные значки веб-страниц, которые подходят для вашей работы. Вы найдете значки, функциональные значки и значки навигации, значки редактирования текста и управления мультимедиа.
В дополнение к пакету SVG они также делают доступным для вас соответствующий HTML-код, просто щелкая каждый бесплатный веб-значок.
Загружаемый формат: SVG и HTML
Иконки, которые вы можете найти на Тильде, просты, минималистичны и идеально подходят для любого типа веб-сайта и практически любой ситуации. Без заливки и геометрический дизайн, большинство этих значков представлены в 2D, а некоторые в 3D, в зависимости от категории, что подводит нас к одному из самых привлекательных аспектов этого веб-сайта — предлагается 43 поразительные категории!
Каждая из этих категорий насчитывает 700 бесплатных иконок для веб-сайтов.Хотя это не самый большой выбор в списке, тот факт, что все четко обозначено в категории, означает, что все не перемешано вместе, что экономит ваше время при поиске бесплатных значков веб-страниц.
Вы найдете бесплатные векторные иконки для веб-сайтов, которые сделают любую работу, которая вам нужна, например веб-семинары, значки агентств мероприятий, салоны красоты, фотостудии, коворкинг и многое другое.
Загружаемый формат: SVG
Fontello предоставляет интересный список бесплатных значков веб-сайтов для использования в качестве шрифтов значков в любом месте вашего веб-сайта или мобильного веб-приложения.Фактически, у вас есть доступ к целому ряду различных наборов иконок от разных авторов, таких как Fontelico, Font Awesome, Modern Pictograms, Typicons и многих других.
Вы можете смешивать и сочетать каждый из этих наборов бесплатных значков веб-сайтов, загружая их по отдельности в виде SVG.
Загружаемый формат: SVG
Если вам нужны значки брендов для своего веб-сайта, Simple Icons предоставит вам исчерпывающий список бесплатных значков для различных компаний и продуктов.Вы можете загружать их по отдельности в виде векторных файлов, каждый в наборе с цветовой кодировкой, чтобы вы могли легко просматривать логотип бренда, который вам нужен, или просто выполнять поиск по бренду с помощью предоставленной панели поиска.
Эти бесплатные фирменные значки веб-сайтов отлично подходят, если вы хотите иметь возможность связывать своих пользователей с внешним веб-сайтом или приложением, иметь возможность делиться своим контентом через социальные сети или если вы просто хотите, чтобы значки отображали определенное программное обеспечение на вашей веб-странице. К таким значкам относятся все, от Hubspot, Microsoft PowerPoint и Slack до Tinder, Instagram и Tesla.Вы обязательно найдете то, что вам нужно!
Загружаемый формат: SVG
Line Icons предлагает более 450 бесплатных иконок для вашего следующего проекта, которые вы можете загрузить в виде полного пакета SVG. Этот пакет содержит множество различных категорий бесплатных значков веб-страниц, в дополнение к значкам настольных приложений и значкам мобильных устройств.
Вы можете быть спокойны, зная, что все их бесплатные значки веб-сайтов легко обновляются, поэтому ваш дизайн всегда будет в тренде. Чтобы загрузить бесплатные веб-иконки с этого сайта, вам просто нужно зарегистрироваться, используя свою электронную почту.
Загружаемый формат: SVG
Если вы ищете разнообразия, то 365psd — идеальный веб-сайт. Благодаря широкому выбору наборов, варьирующихся от сплошных глифов и простых монохромных значков до трехмерных мультипликационных глифов, это один из сайтов с самым разнообразным выбором бесплатных значков веб-сайтов.
Различные доступные наборы также различаются форматами, в которых они могут быть загружены, от SVG и PSD до EPS. Лучше всего то, что эти бесплатные значки веб-сайтов доступны для коммерческого и личного использования.
Загружаемый формат: SVG, PSD и EPS
Если вы ищете что-то немного необычное и красочное, чтобы привлечь внимание пользователей, почему бы не попробовать коллекцию Ballicon из 36 круглых плоских значков с легким градиентом?
Первоначально разработанный PixelBuddha и выпущенный для читателей Smashing Magazine, этот пакет бесплатных значков веб-сайтов полностью бесплатен для вашего личного коммерческого использования, если вы укажете соответствующую атрибуцию.
Загружаемый формат: SVG, PNG и PSD
Feather Icons — отличное место для тех, кто ищет красивые простые бесплатные иконки для веб-сайтов.Все значки на Feather Icons имеют открытый исходный код, из которых можно выбрать более 280. Вы можете скачать все эти бесплатные иконки как полный пакет векторных изображений или по отдельности, по вашему выбору.
Основная привлекательность этих значков — их минималистичный упрощенный дизайн, который полностью открыт для редактирования.
Загружаемый формат: SVG
Если вы ищете разнообразия, Interfacer поставляется с различными пакетами загружаемых значков SVG. Эти пакеты бесплатных иконок для веб-сайтов созданы разными авторами и размещаются на этом сайте бесплатно для коммерческого использования.Вы можете думать об этом как о чем-то вроде Dribbble для иконок.
Вы мгновенно получаете доступ к тысячам высококачественных бесплатных иконок для веб-сайтов, как для развлечения и развлечения, так и для серьезных вещей, таких как наука о данных или банковское дело. Такое разнообразие заслуживает одобрения.
Загружаемый формат: SVG
Элегантные темы рекламируют шрифты иконок на своем веб-сайте как лучшие бесплатные значки для веб-сайтов. Значки на этом сайте особенно полезны для кнопок, значков и навигационных панелей инструментов.
Они также доступны для загрузки в различных форматах, включая SVG и PNG, в дополнение к коду CSS. Они также предоставляют несколько полезных советов в виде руководств на своем веб-сайте о том, как редактировать свои значки с помощью Divi Builder. Нам нравятся эти парни. Они полезны.
Загружаемый формат: SVG, PNG и CSS
Пол Олислагер ценит свой веб-сайт за то, что у него есть оригинальные, совсем не причудливые веб-иконки, которые просто выполняют свою работу. У его наборов бесплатных иконок для веб-сайтов есть особенность, которая действительно отличает их от других, которые вы можете там найти: это целенаправленно пиксельные SVG.Они придают классический вид любой веб-странице, не выглядят старыми или устаревшими, и созданы для придания очень техничного вида.
Paulolyslager.com позволяет бесплатно загрузить большой набор этих бесплатных значков веб-сайтов в форматах SVG и PNG.
Загружаемый формат: SVG и PNG
На Speckyboy вы можете загрузить 100 иконок SVG, специально разработанных Freekpik для использования в ваших проектах веб-дизайна. Вы можете масштабировать их, редактировать и раскрашивать в соответствии с вашими целями.
Если вы ищете красивый и простой пакет бесплатных значков для веб-сайтов, которые можно изменить в соответствии со своей веб-страницей, эти простые бесплатные векторные значки должны быть прямо у вас на улице.
Загружаемый формат: SVG
И последнее, но не менее важное: если вы хотите привнести немного черного юмора на свой веб-сайт, почему бы не попробовать набор Nasty Icons?
Вы можете найти 45 бесплатных иконок для веб-сайтов, которые можно загрузить в виде файлов AI и EPS, которые передают забавные геометрические мультфильмы или приклеивают рисунки людей, которых кипятят заживо, теряют голову или падают с лестничных пролетов.На случай, если вам понадобится что-то в этом роде!
Загружаемый формат: AI и EPS
Создавайте отличные веб-сайты с Justinmind
Если вы типичный владелец Justinmind, наш ассортимент наборов пользовательского интерфейса позволит вам бесплатно поиграть в веб-дизайн.
Если вы ищете больше, чем бесплатные веб-иконки, почему бы не попробовать некоторые из наборов пользовательского интерфейса Justinmind? На нашей странице наборов пользовательского интерфейса вы найдете нашу веб-библиотеку каркасов, в которой есть значки и компоненты, специально предназначенные для веб-дизайна, а также полный набор компонентов и значков пользовательского интерфейса Font Awesome.
Использование наших бесплатных наборов пользовательского интерфейса сделает ваш опыт веб-прототипирования увлекательным, приятным и свободным от стресса, поскольку они были специально разработаны для использования в Justinmind.
Не всегда легко узнать, какие веб-значки обеспечат лучший пользовательский интерфейс и удержат людей. При поиске лучших бесплатных веб-иконок для загрузки для вашего следующего проекта постарайтесь принять во внимание следующие факторы:
Мы надеемся, что этот список немного упростит вам задачу и что вы найдете идеальный набор бесплатных иконок для вашего следующего дизайна.
11 отличных мест для загрузки бесплатных иконок
Иконки — популярная функция в веб-дизайне. При тщательном выборе и разумном использовании они могут помочь вам быстро и четко донести ключевую информацию до посетителей. Однако доступ к библиотекам значков может быть дорогостоящим, особенно если вы используете более одной. Таким образом, вам нужно будет сократить параметры, чтобы убедиться, что вы используете правильный набор значков.
Вот почему в этом посте мы собрали 11 бесплатных наборов значков. Более того, хотя некоторые из источников, которые мы включили в этот пост, также предлагают коллекции значков премиум-класса, для каждого из них доступен как минимум один бесплатный пакет.
Без лишних слов, давайте прямо сейчас!
1. Набор иконок «Элегантные темы»
Во-первых, мы хотели упомянуть наш собственный набор иконок Elegant Themes. Он включает 74 иконки в формате PNG, каждая из которых имеет размер 48 х 48 пикселей.
Эти значки имеют двойную лицензию под Стандартной общественной лицензией (GPL) и лицензией MIT. Они на 100% бесплатны для использования, распространения, перепродажи или иного включения в ваш следующий проект. Нет ограничений!
Если вы хотите разместить на своем сайте значки социальных сетей, возможно, вас заинтересует наш набор значков социальных сетей.У нас также есть более 100 бесплатных иконок Divi. Опять же, их можно использовать как угодно.
2. ThemeIsle
ThemeIsle — это разработчик тем и плагинов WordPress, у которого также есть набор из более чем 100 бесплатных иконок, которые вы можете скачать прямо с его веб-сайта. Все символы представлены в форматах AI, EPS, PNG и SVG. Они также должны быть совместимы с любыми популярными инструментами дизайна или программным обеспечением, которое вы используете.
Обратите внимание, что значки ThemeIsle находятся под лицензией Apache 2.0.Существуют минимальные ограничения на использование, но вы не можете включать значки в товарный знак и должны включать исходные авторские права.
3. Иконки8
Icons8 имеет обширную бесплатную библиотеку иконок. Есть несколько стилей на выбор, которые могут помочь вам найти графику, соответствующую вашему существующему бренду или дизайну. Загрузки доступны в форматах PNG и SVG.
Имейте в виду, что бесплатные иконки могут быть немного более низкого качества, чем те, которые доступны по одной из платных подписок Icons8.Кроме того, вам нужно будет кредитовать Icons8 всякий раз, когда вы используете его активы. Обычно достаточно ссылки в нижнем колонтитуле вашего сайта.
4. Flaticon
Flaticon может похвастаться более чем 3,5 миллионами иконок, многие из которых бесплатны. Они бывают разных стилей и доступны в нескольких форматах, включая PNG и SVG.
При бесплатном использовании ресурсов Flaticon вы должны указывать авторство. К счастью, он предоставляет точную ссылку, которая вам понадобится, чтобы избежать нарушения, и рассказывает, как использовать ее в различных условиях, в том числе на вашем веб-сайте и в социальных сетях.
5. Canva
Canva немного отличается от других источников значков в этом списке. Это бесплатный онлайн-инструмент для графического дизайна, в котором есть несколько цифровых ресурсов, которые вы можете использовать в своих творениях.
Если вы ищете пакеты значков, которые можно загрузить и использовать на своем сайте WordPress, это может оказаться не самым полезным вариантом. Однако он пригодится для создания инфографики и другого визуального контента.
Обратите внимание, что некоторые ресурсы Canva доступны только для премиум-пользователей, поэтому ваши возможности будут ограничены, если вы останетесь с бесплатной учетной записью.
6. iconmonstr
Iconmonstr предлагает (относительно) скромный выбор черно-белых иконок. Существуют сотни «коллекций», которые вы можете скачать в виде файлов PNG, SVG, EPS или PSD. Кроме того, вы можете приобрести более 300 значков в качестве шрифта Iconic Font, который может быть более эффективным вариантом в зависимости от ваших целей дизайна.
Как указано в лицензии iconmonstr, вы не можете использовать эти значки в своем логотипе или товарном знаке. Однако в противном случае вы можете использовать их без указания авторства.
7. Фонтелло
Говоря о шрифтах для иконок, Fontello позволяет вам создавать свои собственные бесплатно. Он использует иконки из множества популярных библиотек, включая Font Awesome и Iconic. Вы можете выбрать нужные символы и загрузить их для использования в своих проектах веб-дизайна.
Этот инструмент очень удобен, если вы хотите использовать в своем дизайне только несколько черно-белых иконок. Вместо того, чтобы загружать весь значок шрифта, вы можете просто добавить те, которые вам нужны.
Что касается лицензирования, Fontello использует только ресурсы с открытым исходным кодом. Тем не менее, его значки сохраняют первоначальные требования создателей, поэтому вы можете дважды проверить документацию для любой библиотеки, которую вы включаете.
8. Freepik
Freepik — это платформа цифровых активов, стоящая за Flaticon. Он также имеет собственную бесплатную библиотеку значков, а также векторную графику и стоковые фотографии, доступные для загрузки.
Если вам нужно большое количество и широкий спектр цифровых активов для вашего проекта, Freepik может стать для вас идеальным ресурсом.Вы можете получить все необходимое из одних рук. Однако указание авторства требуется, если у вас есть бесплатная учетная запись, и вы можете загружать только десять значков в день.
9. Проект существительного
Созданный авторами из более чем 120 стран, The Noun Project представляет собой разнообразную коллекцию иконок и стоковых фотографий. Он предлагает бесплатные загрузки в форматах PNG и SVG, и вы можете использовать их по своему усмотрению с соответствующей атрибуцией.
Цель проекта Noun — продвижение универсального общения.Одним из недостатков использования иконок в веб-дизайне является то, что они иногда плохо переносятся в разных культурах. Разнообразие, присутствующее в коллекции этой библиотеки, может помочь смягчить некоторые из них в вашей работе.
10. GraphicBurger
GraphicBurger предоставляет множество коллекций иконок в разных стилях, все из которых бесплатны. Указание авторства не требуется, но вы не можете распространять ресурсы, загруженные из этого источника.
Если вы предпочитаете более сложные и красочные значки черно-белым символам, на которых специализируются некоторые из других поставщиков в этом списке, GraphicBurger может быть для вас.Его коллекции идеально подходят для целевых страниц, описаний продуктов и других страниц, которые выигрывают от привлекательных визуальных эффектов.
11. IcoMoon
IcoMoon — это набор из почти 500 бесплатных значков «общего назначения». Они довольно утилитарны по дизайну, но хорошо подойдут для меню навигации или других базовых элементов.
Вы можете загружать значки IcoMoon в форматах PNG, SVG, EPS, PSD или Ai. Если вы планируете использовать их с WordPress, вам придется использовать веб-приложение IcoMoon.К счастью, его не так уж сложно настроить и хорошо интегрировать с Divi.
Заключение
Иконки — это простой способ украсить ваш веб-дизайн и создать профессионально выглядящий сайт. Если у вас нет навыков создавать свои собственные, не бойтесь. Есть много бесплатных иконок на выбор.
Конечно, мы неравнодушны к нашему собственному набору иконок Elegant Themes, а также к нашим иконкам Divi. Тем не менее, если есть еще больше возможностей, стоит попробовать IcoMoon, Flaticon и даже Canva.
У вас есть вопросы по иконкам или где их скачать? Дайте нам знать в комментариях ниже!
Изображение статьи предоставлено Invisible Studio / Shutterstock.