Иконки PNG — Загрузите более наборов иконок премиум-класса в формате PNG
Иконки PNG — Загрузите более наборов иконок премиум-класса в формате PNGПросмотр и загрузка значков премиум-класса в формате PNG
Фильтры
Примененные фильтры: Типы: Наборы иконок × Files Included: PNG × Clear Сортировать по: Сортировка TrendingПродаж: 19
Last updated: 28.08.20
Продаж: 4
Last updated: 12.11.20
Продаж: 1
Last updated:
19.
04.21
Продаж: 1
Last updated: 04.10.21
Продаж: 821
Last updated: 27.03.18
Продаж: 1
Last updated: 08.04.21
Продаж: 1
Last updated: 01.02.21
Продаж: 2
Last updated: 22.11.19
saleПродаж: 7
Last updated:
22.
Новогодние иконки png. Новогодние иконки. Набор иконок «Christmas PNG»
Привет, друзья. В преддверии Нового года, конечно же, хочется выкладывать что-нибудь в тему. Нашел вот такие симпатичные иконочки на новогоднюю тематику. Делюсь с Вами. В архиве 33 иконки с различными изображениями на них. Отличие этой сборки от многих остальных, выложенных на моем сайте, — это наличие разных форматов: Adobe Illustrator (Ai, EPS), Adobe Photoshop (PSD ), SVG, ну и конечно же PNG. Так что все иконки можно править в ваших любимых редакторах, а также использовать на сайте в формате SVG.
Изображения на иконках
Перечислять возможно глупо, так как: ну какие иконки могут быть на новогоднюю тему? Ну конечно дед мороз, елка, снежинки и так далее.
Но так вы сможете найти нужные Вам иконки через поиск на сайте или даже поиск google или яндекс. Так что я пройдусь по списку: лицо деда мороза, несколько видов снежинок, олень в стеклянном шаре, табличка «X-MAS», звезда, почтовый голубь, колокольчики, гномик, странный олень в очках, рождественский носок для подарков, мишка, луна, снеговик, варежка, различные елочные украшения, елка, шапка, санта клаус или дед мороз на санях, печенье человечек.
Иконки выполнены в мультяшном стиле в нежных, но ярких тонах: красный, зелено-голубой цвета. В PSD вы кстати можете отделить кружки от самих изображений и тогда получатся совершенно другие иконки, но круглыми они мне нравятся больше. С наступающим 2016 годом и пока.
В канун новогодних праздником многие веб-мастера украшают свои блоги и сайты соответствующим образом (например, о которых я недавно писал). Хотя, конечно, наибольшую неоценимую помощь в этом процессе оказывают новогодние иконки. Вообще иконки — это, наверное, самый простой и ненавязчивый способ добавить на свой сайт немного праздничного настроения Достаточно лишь немного повозиться в фотошопе и добавить в стандартные элементы дизайна парочку новогодних иконок чтобы проект «был готов к праздникам».
Winter Holiday и Christmas Icons
Winter Holiday Icons — данная коллекция включает иконки традиционных рождественских и новогодних символов (колпак, елка, снеговик и так далее). По умолчанию формат иконок — .png, но предусмотрен вариант поставки удобный и для пользователей Mac OS X. Christmas Icons 2 — по сути является продолжением набора Winter Holiday Icons. Разработчик у иконок тот же, поэтому даже страница загрузки одна. Подобные новогодние иконки можно весьма органично вписать в ваш сайт, придав ему праздничный вид. Кстати, обратите внимание, там еще много интересных, а главное бесплатных иконок на другие тематики!
Smashing Christmas Icon Set
Smashing Christmas Icon Set — эта красота была сделана для Smashing Magazine российской студей SoftFacade. В составе 10 иконок, в том числе — RSS, Shopping cart, Календарь, Контакты и прочее.
Happy Santa icons
Happy Santa icons — данный набор иконок обыгрывает тему «Санта Клаус в разных ракурсах». Иконки сделаны качественно (я бы даже сказал в стиле все того же Smashing Magazine). За счет одинакового стиля оформления можно использовать для визуального представления разных разделов или страниц сайта, допустим, «Санта с почтовым ящиком» — это контакты, там где автомобиль — раздел доставки, «Санта с книгой» подойдет для раздела часто задаваемых вопросов (faq) ну и т.п., нужно только включить фантазию.
Christmas Icon Mix
Christmas Icon Mix — большой (нет, огромный) архив иконок, в котором чего только нет! Одну только эту коллекцию можно считать полноценной. Общий размер около 102 mb. Включено 9 EPS файлов, плюс jpeg-превью. Количество отдельных иконок я не считал, но, поверьте их немало.
Глядя на картинку выше, думаю, вы можете ощутить всю масштабность данного набора — снеговики, елочки, подарки и много других полезных визуальных образов. С уверенностью можно сказать, что набор новогодних иконок Christmas Icon Mix достойное пополнение коллекции для любого дизайнера.
До нового года пусть и осталось совсем мало времени, но уверен, вы еще успеет использовать кое-что из представленных наборов для своего сайта дабы добавить ему праздничной атмосферы.
P.S. Постовой. Новая биржа фриланса Golance для всех кому интересная работа удаленно — дизайн, программирование, тексты, переводы и многие другие направления.
Если вы собираетесь провести новый год в Питере, сайт про хостелы санкт-петербурга окажется вам крайне полезным для планирования этой поездки.
Пригласили большее количество гостей и негде всех разместить? — надувная кровать поможет решить эту проблему раз и навсегда.
Как выделить папки с праздничным клиппартом среди остальных папок на компьютере?
Знаете ли вы, что можно поменять стандартный вид папки, заменив его оригинальным изображением.
Изображения, которые вы будете использовать должны храниться в таком месте, откуда вы его уже не будете перемещать, ведь если вы его удалите или перенесете в другое место, ваша папка потеряет свой вид.
Итак, давайте наведем порядок в наших материалах и разложим по отдельным папкам все собранные материалы. Например, у меня есть папка «Музыкальные открытки» (МО — сокращенно). В ней я поначалу создавала различные другие папки — КЛИППАРТЫ, АУДИО. ВИДЕО, АНИМАЦИЯ.
Но открытки бывают на разные тематики — это и времена года, это и различные праздники, поэтому моя папка МО со временем стала превысила десятки ГБ. Я стала разделять материал по временам года и по различным праздникам, и уже в каждой из этих папок у меня были все те же клиппарты, аудио, видео и анимация.
Те папки, которые мне не нужны на данный момент. я закидываю на облачное хранилище, а когда приходит время, возвращаю их на свой компьютер, и то, не полностью — какие-то файлы просто хранятся на облаке до нужного момента.
Со временем у меня в сезонных папках стали появляться папки с названием года, так как проектов каждый год создается много, и когда они все вместе, начинаешь путаться — где какой проект от какой открытки.
И вот сейчас, наводя порядок на своем компьютере, я нашла папку с ИКОНКАМИ новогодней тематики, и решила немного приукрасить оформление своих папок на компьютере.
Если точнее сказать, сами папки я не трогаю, а меняю вид ярлыков, которые открывают нужные мне папки.
Где вы храните весь материал, который нужен, чтобы он был всегда под рукой? Конечно, хочется, чтобы он был на рабочем столе, и часто рабочий стол захламляется до такой степени, что в нем уже трудно оринетироваться — что и где находится.
На рабочем столе не рекомендуется хранить никакие файлы, разве что только ярлыки, так как Рабочий стол расположен на диске С, где установлена операционная система (в большинстве случаев). Все объемные и важные материалы следует хранить на другом диске, например, D.
Ведь, если, вдруг, по какой-то причине у вас потребуется переустановка операционной системы, все файлы с диска С будут уничтожены.
Я за все время, когда мне пришлось работать на компьютере, пережила уже не одну переустановку Операционной системы, поэтому хорошо знаю, что это такое, и так, как мне это объяснили, как делать правильно, я никогда не теряла важных файлов.
А для того, чтобы нужная папка была под рукой в тот момент, когда я с ней работаю, я выношу на рабочий стол ярлык от нужной мне папки. Эту папку мне легко выбрать, когда я ищу место для сохранения нужного мне файла при скачивании, и эта папка всегда у меня под рукой, ведь кликая на ярлык папки, который находится на рабочем столе, я открываю нужную мне папку на диске D.
Для того, чтобы вынести ярлык нужной папки на рабочий стол, кликните по нему правой кнопкой мыши, найдите в меню — Отправить — и подведя курсор, вы увидите — Рабочий стол (создать ярлык).
Итак, ярлык мы создали, теперь можно его «преобразить», украсив красивым изображением.
Для этого кликаем по ярлыку правой кнопкой мыши, опускаемся в самый низ и находим Свойства — Сменить значок:
Для того, чтобы сменить значок не Ярлыка, который мы создали, а непосредственно Папки, необходимо в выпавшем меню перейти в Настройки, после чего вы увдете — Сменить значок.
Предложеннные стандартные значки очень примитивны, поэтому мы нажимаем Обзор, чтобы указать другой путь, где находятся наши новые значки (скачать их можно по ссылке в конце публикации):
Они должны иметь расширение.ico:
Когда вы начинаете работать с другими папками, на вашем рабочем столе появятся новые ярлыки. Ненужные или неактуальные ярлыки можно просто удалить, ведь сами папки, на которые они ссылаются, никуда не денутся, а у вас на рабочем столе будут только нужные для работы.
Если даже таких ярлыков стоновится много, создайте Рабочую Папку (РП) и просто соберите все ярлыки в нее, и тогда у вас на рабочем столе будет порядок.
Для чего еще могут пригодится иконки? Их можно добавлять, как фавикон (иконку сайта), которую видно в адресной строке браузера:
Иконки же с расширением png (на прозрачном фоне), можно использовать на сайтах и в открытках:
Скачать коллекцию новогодних иконок можно, перейдя по ссылке:
Понравились иконки? Не забудь сказать спасибо, нажав на кнопочки социальных сетей.
Другие новогодние подарки вы можете найти
На нашем проекте есть множество интересных значков для сайта, есть и тематические наборы. для сайта пригодятся тем, кто хочет украсить свой сайт к новому году и рождеству. Есть масса способов украшать свои ресурсы к тому или иному празднику, один из способов – это использование новогодних иконок в некоторых частях сайта. Вставьте елочку в шапку сайта, добавьте шапку деда мороза в логотип – все это вызовет улыбку на лице у пользователей, они поймут, что сайт ваш актуальный и активный.
Все значки имеют размер 128×128 пикселей. Набор включает в себя и елочные игрушки, и снеговика, и даже гирлянды.
Пожалуй, самый качественный и интересный набор в этой подборке. Iconka всегда радовала своими работами, и продолжает это делать. В архиве значки в PNG и ICO формате, размеры: 96×96, 64×64.
Не менее качественный набор, да и размеры будут здесь больше, вот только контрастность не впечатляет. Наверное, это и была задумка автора.
Всего три значка: мешок с подарками, кот в шапке деда мороза, и венок.
Всего 3 значка, да и по качеству они сдают. Этот набор я бы не взял в оформление сайта. Он послужит лишь дополнением к другим элементам оформления.
7. Набор иконок «Christmas PNG»
Хоть в архиве только PNG, видно, что набор предназначен для рабочего стола. Здесь есть и иконка «Мой компьютер», есть и много вариантов значка папки.
В архиве Вы найдете только физиономию деда мороза. Можно использовать значки как смайлики.
Хороший набор новогодних иконок. Здесь действительно есть из чего выбирать. Основное наполнение архива – это разноцветные елочные шары.
Значки для сайта — 28 бесплатных наборов
Иконки для сайта – незаменимый элемент любого дизайна UI, не уступающий по важности даже шрифтам, однако на практике редко кто занимается разработкой собственных иконок для каждого веб-сайта. С другой стороны, на поиск подходящих по качеству и оформлению иконок также уходит немало времени, но сегодня мы решили помочь вам, и подготовили подборку бесплатных паков иконок на все случаи жизни.
Icons8 — набор из 20 тысяч плоских иконок для сайта в любых форматах, размерах и цвете! Здесь представлены иконки по таким темам, как бизнес, одежда, еда и многие другие. Скачать набор иконок Icons8 можно в виде приложения для Mac или в виде ZIP-архива.
Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI, .EPS и .SVG.
Этот набор иконок для сайта, выполненный в черно-белом цвете, содержит комбинацию четких функциональных и эмоциональных векторных иконок. Кроме стандартных иконок этот набор содержит иконки в виде сердец и глаз, что позволит вам придать собственным проектам эмоциональный окрас.
Отличный набор иконок для сайта, который можно использовать при разработке международного сайта, интернет-магазина или блога о путешествиях. В набор входит 195 бесплатных иконок с закругленными углами.
Если вы фанат Windows 8, то вам стоит познакомиться с этим бесплатным набором иконок для сайта. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.
Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS. Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone.
Невероятный набор из 350 идеально четких иконок для приложений или сайтов. При этом их можно изменять в размере без потери качества.
80 идеально четких миниатюрных иконок, которые можно скачать как в PSD-формате, так и в виде иконического шрифта. Эти опрятные и утонченные социальные иконки PSD идеально подойдут для проектов любого типа.
Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.
Набор иконок для сайта, выполненных в плоском стиле, среди которых можно выделить календарь, электронную почту, часы, карты и многое другое.
Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.
Бесплатная коллекция в стиле Metro, которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD, SVG, ESP и AI, но также и веб-шрифты.
Элегантный набор иконок, разработанных под вдохновением от iOS 7, который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD, AI и ESP.
Иконки в стиле Pika, созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.
Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG, SVG, SWC и других форматах, что позволит адаптировать их под собственные дизайны.
Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.
Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом.
Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.
Набор, в котором вы найдете иконку PSD любого назначения: Skype, Facebook, Twitter, RSS, чашка кофе, “лайк” и многое другое.
Если вы фанат минимализма, то этот набор точно вам понравится. Он состоит из 48 бесплатных иконок, отражающих офисные задачи, социальные аспекты, а также путешествия. Все они представлены в форматах AI и PNG, и их можно масштабировать без потери качества.
Набор включает в себя свыше 100 иконок, среди которых календари, антивирус, часы, электронная почта, приложения Microsoft Office, социальные сети, а также многое другое.
Набор из более чем 1000 иконок PSD, разработанных командой Icojam. Все они представлены также в формате PNG. Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.
Очередная коллекция мини-иконок от Icojam, в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.
Набор, состоящий из 2600 иконок в виде флагов различных размеров. Каждая иконка представлена в двух вариациях: плоской и глянцевой.
Этот набор предлагает 150 монохромных социальных иконок, которые разрабатывались с учетом простоты. Все они представлены в форматах AI, EPS, PNG и SVG, и их можно использовать в любых проектах абсолютно бесплатно.
Завели себе «пушистый» сайт? Тогда скачайте «пушистые» PSD иконки социальных сетей точно заинтересуют вас!
Обязательно просмотрите этот набор, который состоит из 74 иконок для социальных сетей, которые идеально впишутся в любой дизайн.
Этот набор иконок социальных сетей включает в себя 22 бесплатные рисованные иконки.
Среди них представлены иконки Delicious, Flickr, Twitter, Digg.
Валентин Сейидовавтор-переводчик статьи «28 sets of free icons»
Иконки дом/home png svg icon
Иконки дом/home в разрешении png/svg/ico в одном месте. Несколько вариантов и несколько разрешений иконок домой, почему бы не сделать такой сборник!?Как-то я искал иконку домой и не мог найти нормальную красивую, да еще и формат чтобы подходил! И если я искал, то наверняка еще люди ищут! Чтобы вам не искать иконки домой по всему интернету!
Иконки дом/home в разрешении png/svg/ico в одном месте
- Иконка дом/home png
- Иконка дом/home svg
- Иконка дом/home ico
- Как масштабировать иконки дом/home png/svg/ico
- Иконка дом/home Awesome
Масштабирование иконок в отдельном подпункте
Иконка png дом/home черным контуром
Иконка дом/home в виде непрерывного контура «дома» черного цвета, заливка прозрачная
Иконка png дом/home черным контуромИконка png дом/home черной заливкой
Иконка png дом/home черной заливкой, с закругленными правым и левым нижним углом, с крышей отдельно от основного блока.
Иконка png дом/home черным контуром с разрывом под дверь
Иконка дом/home в виде непрерывного контура «дома» черного цвета, с разрывом под дверь, заливка прозрачная
Иконка png дом/home черным контуром с разрывом под дверьИконка png дом/home черным жирным контуром
Иконка дом/home в виде непрерывного контура «дома» черного цвета, жирным, заливка прозрачная
Иконка png дом/home черным жирным контуромИконка png дом/home черной заливкой с карнизом
Иконка png дом/home черной заливкой, с явно выраженным карнизом, ширина не пропорциональна высоте.
Иконка png дом/home черной заливкой с карнизомИконка png дом/home черным контуром
Иконка дом/home в виде непрерывного контура «дома» черного цвета, с разрывом в точке карниза, заливка прозрачная.
Иконка png дом/home черным контуромИконка png дом/home черной заливкой с прямыми углами
Иконка png дом/home черной заливкой, с прямыми углами, с крышей отдельно от основного блока.
Иконка png дом/home полностью черной заливкой
Иконка png дом/home полностью черной заливкойИконка png дом/home черным контуром включая трубу
Иконка дом/home в виде непрерывного контура «дома» черного цвета, заливка прозрачная, контур проходит по трубе.
Иконка png дом/home черным контуром включая трубуИконка png дом/home с крышей, дверью, окном
Иконка png дом/home с крышей, дверью, окномИконка png дом/home черным контуром
Иконка дом/home в виде непрерывного контура «дома» черного цвета, заливка прозрачная
Иконка png дом/home черным контуромИконка png дом/home черным контуром с заливкой
Иконка дом/home предыдущая версия, обратные цвета.
Иконка png дом/home черным контуром с заливкойИконка png дом/home черной заливкой
Иконка png дом/home черной заливкойИконка png дом/home черным контуром
Иконка png дом/home черным контуром с дверью, окном и подчеркнутым цоколем
Иконка png дом/home черным контуром Скачать иконки домой/home в разрешении pngИконка дом/home svg
Практически двойники иконкам дом/home, только в формате svg:
Иконка svg дом/home черным жирным контуром
Иконка svg дом/home черным жирным контуромИконка svg дом/home черной заливкой с карнизом
Иконка svg дом/home черной заливкой с карнизомИконка svg дом/home черным контуром
Иконка svg дом/home черным контуромИконка svg дом/home черной заливкой с прямыми углами
Иконка svg дом/home черной заливкой с прямыми угламиИконка svg дом/home полностью черной заливкой
Иконка svg дом/home полностью черной заливкойИконка svg дом/home черным контуром включая трубу
Иконка svg дом/home полностью черной заливкойИконка svg дом/home с крышей, дверью, окном
Иконка svg дом/home полностью черной заливкойИконка svg дом/home черным контуром
Иконка svg дом/home полностью черной заливкойИконка svg дом/home черным контуром с заливкой
Иконка svg дом/home полностью черной заливкойИконка svg дом/home черной заливкой
Иконка svg дом/home полностью черной заливкойИконка svg дом/home черным контуром
Иконка svg дом/home полностью черной заливкойИ плюс, в качестве бонуса идет просто код, трех модификаций одной иконки взятой с сайта youtube :
Скачать иконки домой/home в разрешении svgИконка дом/home ico
Иконок в формате ico не так много, и они такие же, только количество чуть поменьше!Иконка дом/home ico
Иконка дом/home ico
Иконка дом/home ico
Иконка дом/home ico
Иконка дом/home ico
Иконка дом/home ico Скачать иконки домой/home в разрешении ico
Как масштабировать иконки дом/home png/svg/ico
Иконка дом/home png
Несколько видом иконок дом/home в разрешении png.
Как менять масштаб иконки в разрешении png.
Добавляем к коду html класс
class=»icon_png»
Должно получиться что-то в виде:
<img src=»путь/home.png» >
В классе прописываем стиль:
img.icon_png {
width: 35px;
}
Иконка дом/home Awesome
Для того, чтобы подключить:иконкой Awesome, нужно его подключитьКод иконки дом/home Awesome:
Код:
<i aria-hidden=»true»></i>
подробнееСообщение системы комментирования :
01.09.2021Форма пока доступна только админу… скоро все заработает…надеюсь…
Руководство по созданию Favicon для всех платформ в 2019 году — UXPUB
Добро пожаловать в руководство по проектированию favicon. В этой статье мы подробно расскажем, как создать идеальный favicon, с конкретными советами по созданию иконок для Apple Touch, Windows 8, Android, Chrome, Opera и Safari. Также вы найдете удобное руководство по различным размерам и форматам favicon.
Итак, во-первых, что такое favicon? Сокращенно от англ. FAVorite ICON — «иконка для избранного» – это маленькие символы, которые появляются в строке URL и списке закладок. Сегодня favicon расширяет бренд сайта за пределы окна браузера во многих контекстах, но мы вернемся к этому позже.
На заре Интернета, создание favicon заключалось в прикреплении ссылки на файл иконки размером 16x16px, и на этом все. В настоящее время все немного сложнее – существуют разные размеры и процессы для разных контекстов. Создание правильного favicon – это наука.
В этой статье вы узнаете, как создать favicon. Мы начнем с советов о том, как он должен выглядеть, а затем перейдем к конкретным советам о том, как создать favicon для различных контекстов.
Мы будем использовать шаблон Apply Pixels, чтобы легко генерировать различные требуемые размеры иконок, а в качестве примера – иконку Apply Pixels.
Логотип Apply Pixels, который используется в качестве примера favicon в этой статье1. Сделайте его узнаваемым
Первое, что нужно учитывать при проектировании favicon, это то, что должно быть представлено на холсте. Помните, что favicon отображается для пользователей только, когда они уже на вашем сайте или добавили его в закладки. Таким образом, нет необходимости пытаться привлечь пользователя своим favicon.
2. Используйте свой логотип
Считайте favicon указателем, который помогает пользователям узнавать ваш сайт при просмотре списков закладок и домашних экранов. Таким образом, логично использовать свой логотип или любой другой символ, который позволяет пользователю узнать ваш сайт. Если у вас нет логотипа, подходящего для квадратного холста, используйте наиболее узнаваемую часть вашего логотипа.
3. Он должен быть понятным
Есть также несколько моментов, которые вы должны избегать. Не используйте favicon в качестве маркетингового инструмента – это означает отсутствие ценников, баннеров «new» или «updated» и т. д. На самом деле, вообще не помещайте текст в favicon. Текст плохо масштабируется, и высока вероятность, что он будет неразборчивым. Наконец, не используйте фотографию – она будет размытой и неузнаваемой в таком мелком размере.
4. Создайте две версии
Когда в Internet Explorer 5 впервые появились favicon, они появились в строке URL-адреса и в списке закладок. Сегодня они также отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Из-за этого довольно трудно прогнозировать, как ваш значок будет отображаться для конечного пользователя.
Чтобы ваш favicon выглядел хорошо в различных контекстах, вы должны предоставить его в двух стилях:
- Логотип на прозрачном фоне. Эта версия отображается в строке URL-адреса, списках закладок и в других местах, где favicon отображается рядом с URL-адресом или именем вашего веб-сайта.
- Логотип на фоне со сплошной заливкой: эта версия используется в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, для достижения единообразного контекста.
5. Создание favicon для десктопного браузера
Давайте начнем с самого простого favicon, который вам нужно создать: классическая иконка для классических десктопных браузеров. Этот тип favicon лучше всего работает на прозрачных фонах, так как зачастую он отображается в строке URL и в списках закладок
Favicon в классическом стиле отображается на панели закладок и в строке URL в Google ChromeВам нужно будет предоставить этот тип иконки в трех размерах, все в формате PNG с прозрачным фоном:
Добавьте этот favicon в HTML <head>, как показано ниже:
<link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-48x48.png">
6. Создание иконки Apple Touch
Apple iOS использует иконки Apple Touch для представления веб-сайтов, сохраненных на домашнем экране iOS, в качестве закладок. Это означает, что иконка Apple Touch, как все иконки приложений iOS, будет округлена c помощью маски в форме суперэллипса, называемого сквиркл (squircle).
Он также будет отображаться на любом фоне, который пользователь
выбрал для своего домашнего экрана. Поэтому ваша иконка Apple Touch должна иметь сплошную заливку фона.
Вы можете использовать иконку Apple Touch 180×180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев. Если нет, вы можете предоставить дополнительные размеры для различных устройств AppleFavicon Apple должна быть в формате PNG. Вы можете использовать иконку Apple Touch 180x180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев.
Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180 (Обязательно)
Добавьте этот favicon в HTML <head>, как показано ниже:
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
7. Плитка Windows 8 и файл browserconfiguration.xml
Хотя Windows 8 больше не поддерживается Microsoft, многие пользователи планшетов продолжают работать на этой ОС. В зависимости от вашей пользовательской базы, вы можете также создать favicon для этой платформы.
Вот как могла бы выглядеть favicon Apply Pixels, в качестве плиток Windows 8:
Плитка Windows 558×270 является единственным не квадратным favicon.
Windows 8 использует плитки для представления веб-сайтов в пользовательском интерфейсе. Всего поддерживается пять размеров, один размер для Windows 8.0 и четыре размера для Windows 8.1.
Плитка Windows 8 состоит из двух компонентов:
- Передний план: ваш favicon с прозрачным фоном.
- Фон: фон плитки, сгенерированный Windows.
Все плитки Windows должны быть в формате PNG с прозрачным фоном. Это размеры, которые вам нужно использовать.
Для Windows 8:
И для Windows 8.1:
- 128×128
- 270×270
- 558×270
- 558×558
Windows 8.0
Цвет фона указывается в HTML-тегах <meta> и файле browserconfig.xml, которые необходимо предоставить:
<meta name="msapplication-TileColor" content="#2b5797"></meta> <meta name="msapplication-TileImage" content="/mstile-144x144.png">
Windows 8.1
Включает browserconfiguration.xml в корневой каталог вашего сайта:
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>
Примечание: Указанные размеры favicon в файле browserconfiguration.xml не соответствуют размерам, указанным выше. Это связано с тем, что в целях масштабирования Microsoft рекомендует предоставлять изображения, размер которых превышает стандартные размеры плитки.
8. Android, Chrome и Opera
Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google.
С момента появления в Android адаптивных иконок к иконкам веб-сайтов, добавленных на домашний экран Android, будет применена маска 192×192. Поэтому иконка приобретает форму предпочитаемого пользователем стиля маскирования. Это может быть сквиркл, эллипс, прямоугольник, прямоугольник с закругленными углами или каплевидная фигура.
В этом случае favicon со сплошной заливкой маскирован в форме сквиркл операционной системы Android Pie. Другие фигуры включают в себя эллипсы, прямоугольник, прямоугольник с закругленными углами и каплевидную фигуруВам необходимо создать favicon в формате PNG со сплошным фоном следующих размеров:
Установите эти иконки, добавив файл site.webmanifest на свой сайт и разместив ссылку на него в тегах <head>:
<link rel=”manifest” href=”/site.webmanifest”>
Ниже приведен код для файла site.webmanifest:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
} 9. Закрепленная вкладка Safari
Это единственный favicon, который необходимо предоставить в векторном формате в виде SVG-файла. Он отображается в виде пиктограммы, когда пользователь прикрепляет вкладку к окну браузера Safari.
В отличие от остальных favicon, этот создается из изображения в формате SVGЭта иконка должна быть 100% черным SVG-файлом с прозрачным фоном. SVG может быть только одним слоем, и Safari требует, чтобы атрибут viewBox для SVG был установлен в “0 0 16 16”.
Добавьте этот favicon в HTML <head>, как показано ниже:
<link rel=”mask-icon” href=”your_icon.svg”>
10. Как насчет Google TV, Chrome Web Store и иконок Apple Touch для версий предшествовавших iOS 7?
А что насчет Google TV, Chrome Web Store и иконок Apple Touch для версий, предшествовавших iOS 7? Существует ряд размеров и форматы favicon, которые не были включены в эту статью, либо потому, что они практически устарели, либо потому, что они редко актуальны для обычного веб-разработчика. В общем, разработчики и дизайнеры должны стремиться поддерживать как можно более широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла.
Например: Google TV был заменен на Android TV в 2014 году, а SDK был вовсе упразднен. Chrome Web Store, вероятно, имеет значение только в том случае, если вы создаете приложение, расширение или тему Chrome, а процент устройств iOS работающих под управлением iOS 7 или более ранней версии сейчас менее, чем ~1 %.
Шпаргалка
Итак, если вы хотите поддерживать полный набор устройств и браузеров, в таблице ниже указаны соответствующие размеры. Ранее favicon должен был быть предоставлен в формате ICO. Сегодня можно использовать файлы в формате PNG (за исключением иконки закрепленной вкладки Safari, которая должна быть представлена в формате SVG).
Если хотите узнать простой способ проектирования и экспорта всех размеров favicon, взгляните на наш шаблон.
| Размеры | Фон | Формат |
| Классические десктопные браузеры | ||
| 16×16 | Прозрачный | PNG |
| 32×32 | Прозрачный | PNG |
| 48×48 | Прозрачный | PNG |
| Apple iOS | ||
| 180×180 | Сплошная заливка | PNG |
| Windows 8.0 | ||
| 144×144 | Прозрачный | PNG |
| Windows 8.1 | ||
| 128×128 | Прозрачный | PNG |
| 270×270 | Прозрачный | PNG |
| 558×270 | Прозрачный | PNG |
| 558×558 | Прозрачный | PNG |
| Google Android и Chrome | ||
| 192×192 | Сплошная заливка | PNG |
| 512×512 | Сплошная заливка | PNG |
| Opera Coast | ||
| 228×228 | Сплошная заливка | PNG |
| Safari Pinned Tab | ||
| Vector | Прозрачный | SVG |
Как добавить иконки преимуществ в карточку товара
В решении MegaMart есть возможность добавить в карточку товара иконки, которые будут говорить о преимуществах, особенностях данного товара. Иконки создаются через административную часть сайта.
Перейдите по пути: Администрирование > Контент > Инфоблоки > Типы инфоблоков > Каталог товаров > Каталог товаров
В правой части экрана в вкладке «Свойства« найдите поле «Иконки в карточке» и нажмите на три точки «…»
В окне настройки свойств инфоблока в «Дополнительных настройках» создаются иконки. В пустой строке прописываются:
Далее перейдите в публичную часть сайта, включите режим правки.
- Название (будет отображаться в карточке товара под иконкой)
- Число сортировки
- Внешний код (прописывается строчными латинскими буквами без пробелов)
- Загружается изображение: рекомендуемый размер 65х65 рх
- Описание
- Полное описание (будет отображаться при наведении мыши на иконку)
Наводите курсор на область каталога, дождитесь появления всплывающей панели и нажмите шестеренку.
В параметрах компонента перейдите к «Настройкам детального просмотра» и в «Таблица с брендами» выделите «Иконки в карточке». Нажмите «Сохранить»
notlmn / awesome-icons: тщательно подобранный список потрясающих загружаемых проектов значков SVG / PNG / шрифтов.
GitHub — notlmn / awesome-icons: тщательно подобранный список потрясающих загружаемых проектов значков SVG / PNG / Font.Файлы
Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.Тип
Имя
Последнее сообщение фиксации
Время фиксации
Кураторский список потрясающих загружаемых проектов значков SVG / PNG / шрифтов
Содержание
Общий
Иконки общего назначения используются повсеместно.
- Иконки Bootstrap — иконки SVG, специально разработанные и созданные для компонентов Bootstrap. (Сайт)
- Boxicons — Простой векторный набор иконок с более чем 1000 значками и 100+ логотипами. (Сайт) Иконки размером
- байт — крошечный набор иконок SVG с управляемым стилем. (Сайт)
- css.gg — Иконки пользовательского интерфейса на чистом CSS, SVG и Figma доступны в SVG Sprite, стилизованных компонентах, NPM и API. (Сайт)
- иконок Eva — пакет из более чем 480 красиво созданных иконок с открытым исходным кодом. (Сайт)
- Evil icons — простой и чистый пакет значков SVG с кодом для поддержки Rails, Sprockets, Node.js, Gulp, Grunt и CDN. (Сайт)
- Feather — Просто красивые иконки с открытым исходным кодом. (Сайт)
- Flaticon — Самая большая база бесплатных векторных иконок. (Сайт)
- Fluent System Icons — коллекция знакомых, удобных и современных значков от Microsoft.
- Font Awesome — культовый набор инструментов SVG, шрифтов и CSS. (Сайт)
- Heroicons — Набор бесплатных высококачественных иконок SVG для использования в ваших веб-проектах. (Сайт)
- IconPark — IconPark предоставляет доступ к более чем 1400 высококачественным значкам и представляет интерфейс для настройки ваших значков.(Сайт)
- ICONSVG — Быстро настраиваемые значки SVG, легко настраивайте штрихи, концы и соединения контуров. (Сайт)
- Ion icons — премиум-шрифт для Ionic Framework и веб-приложений во всем мире. (Сайт)
- Иконок материального дизайна — Иконки материального дизайна от Google. (Сайт)
- Octicons — масштабируемый набор иконок, вручную созданных с помощью <3 на GitHub. (Сайт)
- Open Iconic — Open Iconic является братом Iconic с открытым исходным кодом. (Сайт)
- Picon — Мелкий иконочный шрифт на основе лигатур и SVG.(Сайт)
- Remix Icon — Remix Icon — это набор системных символов с открытым исходным кодом в нейтральном стиле для дизайнеров и разработчиков. (Сайт)
- Shape.so — Настраиваемые анимированные значки и иллюстрации, экспортируемые в код. (Сайт)
- Super Tiny Icons — миниатюрные SVG-версии логотипов ваших любимых веб-сайтов и приложений, каждая размером менее 1 КБ.
- Tabler Icons — набор из более чем 300 бесплатных высококачественных SVG-значков с лицензией MIT, которые вы можете использовать в своих веб-проектах.
- Teenyicons — 1000+ лицензированных MIT значков SVG, которые легко помещаются в очень маленькое пространство 🤏 и сохраняют четкий вид ✨.(Сайт)
- The Noun Project — Иконки для всего, более 2 миллионов тщательно отобранных иконок, созданных мировым сообществом.
- Tilda Icons — Tilda Icons, это веб-сайт, полный бесплатных иконок для целевых страниц и многого другого.
- Unicons — 1000+ векторных иконок с идеальным пикселем и иконочный шрифт для вашего следующего проекта. (Сайт)
- VSCode Icons — темная и светлая версии значков, используемых в Visual Studio Code.
- Иконки погоды — Иконки погоды и CSS.
- Zondicons — набор бесплатных SVG-иконок премиум-класса для использования в цифровых продуктах.(Сайт)
Логотипы
Логотипы различных брендов, компаний или технологий.
Особый
Иконки, которые не являются общими или логотипами, а являются чем-то особенным.
- Flag Kit — Красивые значки флагов для использования в приложениях и в Интернете.
- Mapsicon — Бесплатная коллекция карт для каждой страны мира.
Прочие
только CSS
Иконки сделаны только из CSS (не загружаются).
- cssicon — Набор значков, созданный с использованием чистого кода css, без зависимостей, значков «захвати и работай».(Сайт)
- icono — Чистый CSS, набор значков на основе классов. (Сайт)
Платный
Не с открытым исходным кодом / бесплатно, но все же достаточно круто.
- Heroicons — Уникальный набор иконок для вашего маркетингового сайта.
- Iconic — окончательный набор иконок, разработанный для современной сети.
- Nucelo Icons — премиальная библиотека иконок SVG для iOS, Android и веб-проектов.
Лицензия
Около
Кураторский список потрясающих загружаемых проектов значков SVG / PNG / шрифтов
Темы
ресурсов
Лицензия
Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.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.com
20 лучших бесплатных наборов значков
От инструкций по уходу за одеждой до дизайна веб-сайтов и значков — значки повсюду. Они помогают упростить общение, передавая сообщения с первого взгляда без слов. Тем не менее, несмотря на их широкое распространение, включение этих небольших визуальных символов в творческую работу требует от дизайнера большой точности.
Если вы хотите использовать значки в своей работе, помните, что все значки в одном проекте должны быть согласованными и соответствовать одним и тем же визуальным принципам. Поэтому лучше всего работать с одним набором значков, который имеет унифицированный вид, гарантируя, что все ваши значки будут соответствовать друг другу.
Если вы не можете найти все нужные значки в одном наборе, потратьте время на подбор значков, которые соответствуют стилю и языку, отмечая такие параметры, как ширина линии, форма угла (острый или круглый), контур или заливка, и более.
Ниже мы выбрали 20 наших любимых наборов значков и ресурсов для ваших проектов. Все они бесплатны, но обязательно ознакомьтесь с лицензией каждого из них, так как некоторые требуют указания авторства, некоторые бесплатны только для личной работы и т. Д. Вот они, для всех ваших творческих потребностей:
Noun Project
Значки дизайна материалов
Icons8
Softies
iOS Edge
Linearicons
Ionicons
Jam
Font Tonicons
Смешанные компьютерные иконки
Wix
Мультимедиа
Streamline
Иконки Simple Line
Minimal Icons
Lynny Icons
01.Noun Project
Формат: SVG и PNG
Всего: 2M +
Запущенный в 2011 году, Noun Project ежедневно обновляется новыми значками, созданными мировым сообществом профессиональных авторов. В настоящее время он содержит более двух миллионов значков, все из которых бесплатны, загружаются и настраиваются.
Бесплатные участники Noun Project должны указывать дизайнера значка при каждом использовании. Для тех, у кого есть платное членство, указание ссылки не требуется.
02.Значки дизайна материалов
Формат: SVG, PNG и встроенный CSS
Всего: 1000+
В составе ресурсов Google по дизайну материалов (наряду с генератором цветовой палитры, каталогом шрифтов и т. Д.) Находится эта богатая коллекция открытых исходные значки. Значки доступны в пяти различных темах: заливка, обводка, закругление, двухцветная и резкая.
03. Icons8
Формат: PNG, SVG, PDF и встроенный HTML
Всего: 140 000+
Обширная коллекция Icons8, созданная и разработанная собственными силами, состоит из множества наборов иконок.Таким образом, вы можете выбрать стиль, который лучше всего подходит для вашего проекта, и работать с иконками в этом наборе. Веб-сайт предлагает полную настройку перед загрузкой, от изменения цвета, размера и формата значка до добавления текста.
Иконки бесплатны, но ссылка на веб-домен icons8.com обязательна для любого неоплачиваемого использования.
04. Softies
Формат: SVG и встраивание
Всего: 400+
Softies начинались как личный проект Робби Пирса, в котором он каждый день создавал иконку.Накопив сотни значков за годы, он выпустил проект в виде пакета значков, бесплатного как для личных, так и для коммерческих проектов.
05. iOS Edge
Формат: файлов SVG и AI
Всего: 216
Этот бесплатный набор значков, разработанный Заком Рощевским для Flaticons, соответствует стандартам Apple для интерфейса iOS. Он доступен как в очерченной, так и в заполненной версиях. Этот бесплатный образец является частью более полного платного набора из 2400 иконок.
06. Linearicons
Формат: SVG, PDF, настольный шрифт и встроенный HTML Всего: 170
Эта коллекция векторных иконок является бесплатной версией большого премиального набора, состоящего из 1001 иконки. Иконки были созданы в сетке 20×20 пикселей. При использовании бесплатной версии обязательно укажите ссылку на сайт для указания авторства и упомяните Perxis в качестве дизайнера.
07. Feather
Формат: SVG
Всего: 282
Feather — это коллекция иконок с открытым исходным кодом, созданная Коулом Бемисом.Иконки созданы в сетке 24×24 с упором на простоту, единообразие и гибкость и лицензированы в соответствии с лицензией MIT. Вы также можете найти эти значки в виде библиотеки Sketch, на Github и т. Д.
08. Ionicons
Формат: SVG и встроенный SVG
Всего: 318
Ionicons — это коллекция с открытым исходным кодом, лицензированная MIT. Все значки имеют стиль материального дизайна, а также стиль iOS, поэтому они отлично смотрятся как на Android, так и на iOS.Они также совместимы с сетью и могут использоваться как веб-шрифт. Коллекция была создана командой Ionic Framework.
09. Jam
Формат: SVG, JavaScript и шрифт
Всего: 800+
Jam — это набор иконок, разработанный Майклом Ампримо для веб-проектов, приложений и проектов печати. Иконки созданы в сетке 24×24 с обводкой 2 пикселя и бывают как контурными, так и заполненными. Набор под лицензией MIT License также можно найти на Github.
10. Font Tonicons
Формат: SVG, PNG, AI файлы и встроенный CSS
Итого: 300
Этот иконочный шрифт CSS был создан для дизайнеров и разработчиков веб-сайтов. Значки являются векторными, а версии PNG доступны в версиях 32 и 64 пикселей. Обратите внимание, что это бесплатно только для личного использования. Для коммерческих целей Tonicons предлагает различные платные наборы иконок.
11. Смешанные значки компьютеров
Формат: EPS и JPG
Всего: 225
Эта коллекция векторных значков от Raw Pixel бесплатна, но требует ссылки на rawpixel.com для атрибуции. Включенные значки варьируются от науки и медицины до путешествий, бизнеса и т. Д.
12. Wix
Формат: Интернет
Всего: 1000+
Если вам нужны значки для создания вашего веб-сайта, Wix.com предоставляет пользователям разнообразную библиотеку значков, векторную графику. , и значки. Значки полностью настраиваемы и представлены в различных стилях, чтобы соответствовать любому направлению дизайна, которое вы хотите изучить.
Кроме того, бесплатный Logo Maker от Wix полностью оснащен множеством красивых иконок для профессионального дизайна логотипа.
13. Мультимедиа
Формат: файлы SVG, PNG и AI
Всего : 50
Этот набор от Iconfinder содержит 50 векторных иконок. Он был разработан Сергеем Ершовым и находится под лицензией Creative Commons, что требует предоставления соответствующего кредита для любого использования.
14. Justicons
Формат: PSD
Всего: 140
Эта коллекция векторных иконок Радмира Мингалиева бесплатна как для личного, так и для коммерческого использования.
15. Значки с геометрическими линиями
Формат: AI
Всего: 108
Эти значки Энди Келли созданы с использованием только прямых линий с шириной линии 2 пикселя. Максимальный размер значков составляет 20 пикселей, поэтому их лучше всего использовать в дизайне приложений или веб-интерфейса.
16. Nucleo
Формат: SVG и шрифт значков
Всего: 60
Этот набор значков от Nucleo является тестовым образцом для гораздо более крупной платной библиотеки компании, состоящей из 28 502 значков.Более скромная бесплатная коллекция состоит из набросков, глифов и цветных версий каждой из 60 иконок, а также дополнительных мини-иконок.
17. Streamline
Формат: PNG
Всего: 30,000+
Значки Streamline бывают трех разных весов (светлые, обычные и жирные) и имеют множество категорий, от основных элементов интерфейса до работы на открытом воздухе и для отдыха. Участники бесплатного веб-сайта могут загрузить версию значков размером до 48 пикселей, но платные пользователи получают доступ к файлам большего размера, а также к дополнительным типам файлов SVG и PDF.
18. Простые иконки линий
Формат: SVG, EPS, PSD и AI файлы
Всего: 100+
Эти векторные иконки линий были разработаны внештатным графическим дизайнером Мирко Монти. Они доступны бесплатно для личной, открытой и коммерческой работы.
19. Минимальные значки
Формат: SVG, EPS, PNG и файлы Sketch, PSD и AI
Всего: 1,800
Этот пакет минимальных значков бывает двух стилей — резкий и округлый.Он был разработан Александру Стойкой на сетке 20×20.
20. Lynny Icons
Формат: EPS, PNG и AI файлы
Всего: 450
Этот набор иконок, разработанный Мэтью Скилсом, является бесплатным для личного и коммерческого использования с указанием ссылки на 1001FreeDownloads.com. Значки охватывают темы электроники, электронной коммерции, Интернета, погоды и т. Д.
Текст Eden Spivak
Эта статья не спонсируется и не поддерживается какими-либо из указанных брендов, кроме Wix.com. Wix.com не дает никаких гарантий относительно этих брендов и их соответствующих услуг, а также не поддерживает эти услуги для каких-либо конкретных целей.
8 веб-сайтов, на которых можно найти бесплатные значки Creative Commons для дизайнерских проектов
Найти бесплатные наборы значков в Интернете не займет много времени. Хотя они полезны, они не всегда лучший вариант для поиска конкретных значков . Вот здесь и могут помочь бесплатные сайты с иконками.
Эти веб-сайты создают значки на основе лицензии (Creative Commons или премиум / коммерция).Ниже я составил хороший список для всех, кто хочет быстро найти определенные значки CC в Интернете.
НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: 1500000+ иконок и элементов дизайна
СКАЧАТЬ
Iconfinder
Если вы потратите какое-то время на поиск значков, то обязательно наткнетесь на Iconfinder. Это главное место назначения для любой иконки, которая может вам когда-либо понадобиться.
Он работает как поисковая система, где вы вводите стиль значка или глиф (например, «увеличительное стекло» для значка поиска).После этого вы увидите результаты, как коммерческие, так и бесплатные.
Но если вы посмотрите глубже в настройки поиска, вы можете отфильтровать результаты, чтобы просмотреть только бесплатные или только платные варианты. Вы также можете установить размеры значков и несколько других критериев поиска.
Без сомнения, Iconfinder — лучшее место для начала, если вы ищете бесплатные значки. Если значок находится в сети, Iconfinder проиндексировал его.
Все значки, шрифты, веб-шаблоны и элементы дизайна, которые вы могли бы попросить
СКАЧАТЬ
Существительное Проект
На веб-сайте Noun Project вы найдете тщательно подобранный список, состоящий из более чем миллиона иконок.
Этот сайт также работает как поисковая система, где вы можете фильтровать значки на основе ключевых слов, стилей и форм глифов. Например, вы можете найти значок почты и получить довольно чистые результаты.
But The Noun Project не является полностью бесплатным. У них есть дополнительный профессиональный план, который дает вам доступ к гораздо большему количеству значков.
К счастью, их бесплатная библиотека значков все еще достаточно велика, чтобы на нее можно было положить закладку.
FindIcons
FindIcons — это поисковая система, состоящая только из значков, с одним приятным интерфейсом.
Когда вы начнете вводить текст, вы заметите, что результаты поиска автоматически заполняются на основе существующих тегов. Это поможет вам очень быстро найти именно то, что вы ищете.
Также сбоку есть меню фильтров, которое позволяет выбрать, сколько значков отображать на странице, цвета значков, стили и лицензию.
На этот однозначно стоит сэкономить, если вам нужен качественный поисковик исключительно для поиска иконок.
Флатикон
Можно много сказать о тенденции плоского дизайна, охватившей всю индустрию.Одно можно сказать наверняка: если вы создаете плоские веб-сайты, у вас не будет проблем с поиском ресурсов.
Веб-сайт Flaticon — один из таких примеров.
Это бесплатная поисковая машина значков , посвященная стилям плоских значков. Здесь вы найдете только плоские значки, и все они взяты из пакетов значков с открытым исходным кодом, представленных сообществом.
Одна интересная особенность заключается в том, что они предлагают значки во многих различных форматах, включая base64. Вы можете использовать код base64 в CSS для встраивания значков на свою страницу без сохранения файла изображения.
Flaticon, безусловно, лучшее место для поиска иконок, если вы регулярно работаете с плоским дизайном.
Google Images (поиск CC)
Многие люди пропускают Google Images в поисках дизайнерских ресурсов. Обычно это происходит потому, что результаты в Картинках Google поступают с других веб-сайтов, и вы никогда не знаете, какую лицензию они используют.
Но в Картинках Google есть отличная функция, о которой мало кто знает.
Если вы нажмете «Инструменты», а затем «Права на использование», вы сможете выбрать одну из многих лицензий Creative Commons для поиска.
Это автоматически ограничивает поиск изображений, возвращая только изображений с правильными правами использования. Довольно круто!
В качестве альтернативы существует страница поиска CC, которая может возвращать аналогичные результаты. Но внутренний поиск CC никогда не сможет сравниться с возможностями Google.
Фонтелло
Я не могу сказать, что Fontello — это действительно поисковая система только для иконок. Но это замечательный веб-сайт, который поможет вам найти бесплатные ресурсы Creative Commons — с множеством значков, которые можно перемещать.
Он описывается как «генератор шрифтов значков» и может использоваться для создания файлов пользовательских шрифтов значков для встраивания через CSS.
Обратите внимание, что вы также можете загрузить эти значки в виде векторов и переработать их в соответствии со своими потребностями.
Хотя это не самая большая библиотека значков из существующих, в ней, безусловно, есть множество качественных значков для дизайнеров.
Iconmonstr
Iconmonstr относительно новый по сравнению с другими упомянутыми мною сайтами. Тем не менее, это фантастический репозиторий иконок, полный 100% бесплатных иконок с открытым исходным кодом.
На момент написания этой статьи он содержит более 4000 иконок — все они организованы в разные коллекции. Они помогут вам найти значки по таким темам, как спорт, бизнес или здравоохранение.
Есть также стандартное поле поиска, если вы точно знаете, что ищете.
Просто обратите внимание, что Iconmonstr в первую очередь организует однострочные значки в аналогичном минималистском стиле. Так что он отлично подходит для поиска значков с определенным стилем, но не поможет ни в чем другом.
GitHub
Может показаться странным рекомендовать репозиторий кода в качестве ресурса для графики.Но на GitHub действительно есть много репозиториев с бесплатными значками, доступными в виде SVG и PNG — среди других форматов.
Просто поищите значки, и вы поймете, что я имею в виду.
Конечно, будет множество скриптов и шаблонов, построенных на основе значков, которые будут отображаться в результатах поиска. Но вы также найдете репозитории для библиотек значков с открытым исходным кодом, которые дизайнеры решили разместить и выпустить на бесплатной платформе GitHub.
Считайте это последним средством поиска малоизвестных и нишевых значков.Не ждите чудес, но несколько драгоценных камней, которые вы найдете, действительно могут повлиять на ваши дизайнерские проекты.
Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .
.