Иконки для сайта png: Доступ к +5.0M векторным иконкам

Page not found (404)

Toggle navigation

• Packs
  • Значок пакеты недавно Загрузил
  • Самых популярных значок пакеты
  • Эксклюзивные наборы значков
• категории
  • Сельское хозяйство Иконки
  • Животные Иконки
  • Аватар и смайлики Иконки
  • Красота и мода Иконки
  • Бизнес и финансы Иконки
  • Мультфильм Иконки
  • Кино, телевидение и фильмы Иконки
  • Одежда и аксессуары Иконки
  • Преступление и безопасность Иконки
  • Культура, религия и фестивали Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Электронная торговля и покупки Иконки
  • Электронные устройства и оборудование Иконки
  • Файлы и папки Иконки
  • Флаги и карты Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Gym и Fitness Иконки
  • Здравоохранение и медицина Иконки
  • Промышленность и инфраструктура Иконки
  • Инфографика Иконки
  • Дети Иконки
  • люблю Иконки
  • Разное Иконки
  • Музыка и мультимедиа Иконки
  • Сеть и связь Иконки
  • Недвижимость и строительство Иконки
  • Школа и образование Иконки
  • Наука и технологии Иконки
  • SEO и Web Иконки
  • Sign и Symbol Иконки
  • Социальные медиа и логотипы Иконки
  • Спорт и игры Иконки
  • Инструменты, строительство и оборудование Иконки
  • Транспорт и транспортные средства Иконки
  • Путешествия, отели и каникулы Иконки
  • Пользовательский интерфейс и жесты Иконки
  • Погода и сезоны Иконки
• стили значков
  • 3D Иконки
  • Badge Иконки
  • Filled outline Иконки
  • Flat Иконки
  • Glyph Иконки
  • Handdrawn Иконки
  • Long shadow Иконки
  • Outline Иконки
  • Photorealistic Иконки
• Популярные поиски
  • Instagram Иконки
  • Vk Иконки
  • телефон Иконки
  • Папки Иконки
  • деньги Иконки
  • Социальные Иконки
  • Facebook Иконки
  • Telegram Иконки
  • Viber Иконки
  • корзина Иконки
  • Whatsapp Иконки
  • стрелка Иконки
  • Youtube Иконки
  • дом Иконки
  • Phone Иконки
  • люди Иконки
  • почта Иконки
  • папки Иконки
  • человек Иконки
  • доставка Иконки
  • галочка Иконки
  • папка Иконки
  • музыка Иконки
  • Mail Иконки
  • компьютер Иконки
  • вк Иконки
  • Steam Иконки
  • Instagram Иконки
  • сайт Иконки
  • фото Иконки

• Log in
• Register

404 Icon by Laura Reen

Page not found (404)

Toggle navigation

• Packs
  • Значок пакеты недавно Загрузил
  • Самых популярных значок пакеты
  • Эксклюзивные наборы значков
• категории
  • Сельское хозяйство Иконки
  • Животные Иконки
  • Аватар и смайлики Иконки
  • Красота и мода Иконки
  • Бизнес и финансы Иконки
  • Мультфильм Иконки
  • Кино, телевидение и фильмы Иконки
  • Одежда и аксессуары Иконки
  • Преступление и безопасность Иконки
  • Культура, религия и фестивали Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Электронная торговля и покупки Иконки
  • Электронные устройства и оборудование Иконки
  • Файлы и папки Иконки
  • Флаги и карты Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Gym и Fitness Иконки
  • Здравоохранение и медицина Иконки
  • Промышленность и инфраструктура Иконки
  • Инфографика Иконки
  • Дети Иконки
  • люблю Иконки
  • Разное Иконки
  • Музыка и мультимедиа Иконки
  • Сеть и связь Иконки
  • Недвижимость и строительство Иконки
  • Школа и образование Иконки
  • Наука и технологии Иконки
  • SEO и Web Иконки
  • Sign и Symbol Иконки
  • Социальные медиа и логотипы Иконки
  • Спорт и игры Иконки
  • Инструменты, строительство и оборудование Иконки
  • Транспорт и транспортные средства Иконки
  • Путешествия, отели и каникулы Иконки
  • Пользовательский интерфейс и жесты Иконки
  • Погода и сезоны Иконки
• стили значков
  • 3D Иконки
  • Badge Иконки
  • Filled outline Иконки
  • Flat Иконки
  • Glyph Иконки
  • Handdrawn Иконки
  • Long shadow Иконки
  • Outline Иконки
  • Photorealistic Иконки
• Популярные поиски
  • Instagram Иконки
  • Vk Иконки
  • телефон Иконки
  • Папки Иконки
  • деньги Иконки
  • Социальные Иконки
  • Facebook Иконки
  • Telegram Иконки
  • Viber Иконки
  • корзина Иконки
  • Whatsapp Иконки
  • стрелка Иконки
  • Youtube Иконки
  • дом Иконки
  • Phone Иконки
  • люди Иконки
  • почта Иконки
  • папки Иконки
  • человек Иконки
  • доставка Иконки
  • галочка Иконки
  • папка Иконки
  • музыка Иконки
  • Mail Иконки
  • компьютер Иконки
  • вк Иконки
  • Steam Иконки
  • Instagram Иконки
  • сайт Иконки
  • фото Иконки

• Log in
• Register

404 Icon by Laura Reen

50 сайтов с бесплатными иконками

Ребята из проекта Canva знают о сайтах с бесплатными иконками буквально все — составили список из 50 наиболее популярных и интересных.

Теперь есть из чего выбрать!

• 1001 Free Downloads. Плоские иконки.
• AlienValley. Наборы иконок в обмен на email.
• All-Free Download. Векторы, PNG, PSD. Бесплатно.
• Behance. Дизайнерские иконки. Придется пофантазировать в плане поиска.
• Best PSD Freebies. Бесплатные иконки в PSD.
• Blugraphic. PSD, PNG и векторные иконки. Поиск по тегам. Еженедельная подборка бесплатных иконок.
• Captain Icon. Форматы: EPS, PSD, PNG, SVG и иконочный шрифт. Можно кастомизировать цвет и размер.
• CSS Author. Еженедельные подборки бесплатных иконок.
• Creative Tail. Иконки, которых больше нигде нет.
• Dafont. 50 иконочных шрифтов. Проверяйте правила использования.
• DevianArt. 200 000 иконок. Некоторые художники предпочитают делиться только с участниками DevianArt.
• DesignBurger. Наборы иконок от Behance, Freepik и других.
• Dreamstale. Бесплатные и иконки премиум-класса. Требуется ссылка на автора.
• Duckfiles. Иконки для персонального и коммерческого использования. В свободном доступе.
• Dribbble. Иконки для личного и коммерческого использования. Кстати, здесь мы берем иллюстрации для рассылки.
• Dryicons. 5 000 иконок, 77 наборов.
• Ego Icons. 1500 премиальных иконок и 100 бесплатных векторов. Посетите и дочерние сайты.
• Entypo. Иконки 20×20 в SVG. Требуется атрибуция.
• Endless Icons. PNG и SVG.
• Flat Icon. Форматы: SVG, EPS, PSD or PNG. Иконки можно скачать в виде шрифта. Обратная ссылка обязательна.
• Free Goodie For Designers. PSD, SVG и векторные иконки.
• Freebiesbug. Бесплатные PSD.
• Freepik. Форматы: PNG, EPS, SVG. Требуется указание автора.
• Fontello. Иконки в SVG. Выделите, чтобы скачать в виде шрифта
• Fribly. Наборы иконок от разных дизайнеров.
• Fusionplate. Еженедельные обзоры бесплатных наборов.
• Glyphicons. PNG. Минимализм, монохром.
• Good Stuff No Nonsense. Нарисованы от руки. Не требуется обратная ссылка.
• GraphicBurger. Если ищете милые иконки, вам сюда. Прямая загрузка, несколько форматов и размеров.
• GraphicsFuel. Бесплатные иконки.
• GraphicsBay. Роялти фри. Создатели обещают, что иконки уникальны.
• Gravual. Две коллекции: кухонная утварь и улица. Для коммерческого использования свяжитесь с правообладателем.
• IcoJam. Иконки от дизайнеров Icojam.
• Iconfinder. 554 437 бесплатных и небесплатных иконок. Для скачивания доступно несколько форматов и размеров.
• Iconmelon. Любопытная инструкция по применению. И иконки, конечно.
• Iconmonstr. Доступно несколько размеров. Бесплатно, без ссылок на автора.
• Iconic. Бесплатный набор из 223 иконок в SVG, растре и шрифтовом форматах.
• IcoMoon App. Более 4000 векторных иконок. SVN, PNG, PDF и шрифт.
• IconArchive. 590 918 иконок в 2 443 наборах.
• Icon Shock. Иконки собраны по категория. Чтобы использовать в коммерческом проекте, внесите разовый платеж.
• MrIcons. Более 100 000 иконок от веб-интерфейса до соцсетей.
• NounProject. Бесплатные иконки взамен на ссылку на автора. Чтобы снять ограничение, подключите тариф.
• Oxygenna. Наборы иконок в PNG, PSD и AI.
• Pixelsmarket. Иконки с известных и не очень сайтов.
• PixsHub. Собирает иконки по сети.
• Pixeden. Иконки в PNG. Разрешение: от 16×16 до 512×512.
• Smashing Magazine. Форматы: AI, PSD, SVG, PNG, CSH and Sketch. Большинство наборов не требуют обратной ссылки.
• Squid Ink. 2 000 векторных иконок в 17 категориях.
• Vecteezy. 60 страниц векторных иконок.
• Web Design Freebies. Сборник иконок с разных сайтов. Можно сразу посмотреть весь набор.

Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?

Favicon

– это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

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

О каких платформах пойдет речь в этой статье?

• Десктопные браузеры
• Chrome на Android
• Иконка закладки в iOS (PWA)
• macOS
• Windows

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер

icoconvert

. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

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

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса

RealFaviconGenerator

.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

  

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью

background_color

.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть

apple touch icon

. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание

apple touch icon

.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут

rel=«apple-touch-icon»

и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут

rel=«mask-icon»

. Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте

color=»#e52037″

.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое

browserconfig

? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.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>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

В

browserconfig

файле определены изображения для различных размеров плитки.

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

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

• Small — 70×70 (Рекомендуемый размер: 128×128)
• Medium — 150×150 (Рекомендуемый размер: 270×270)
• Wide — 310×150 (Рекомендуемый размер: 558×270)
• Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет

mstile-70×70

. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «

theme-color

» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Лучшие наборы иконок для веб-разработчиков

Перевод статьи «Top icons packs and resources for web».

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

Но рисовать их с нуля долго и дорого. Поэтому имеет смысл обратить внимание на готовые решения.

Вот несколько доводов в пользу использования иконок в вашем следующем проекте:

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

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

Для легкости восприятия продукты в подборке разделены на категории. Категорию вы сможете найти перед описанием продукта. Речь идет о следующих категориях:

• Бесплатные наборы иконок.
• Торговые площадки. Там содержатся иконки разных производителей, отличающиеся как по цене, так и по качеству.
• Иконки в стиле Material design и Flat.
• Наборы CSS-иконок. Эти иконки, как следует из названия, созданы на основе CSS. Для их использования нужно просто скопировать код себе на страницу.
• Иконочные шрифты. В этих шрифтах вместо букв и цифр используются символы. Они популярны в среде веб-дизайнеров, поскольку их можно стилизовать при помощи CSS точно так же, как обычный текст. Браузеры тоже воспринимают иконочные шрифты как текст, так что вам нужно будет нормализовать иконки во избежание проблем со сглаживанием. Иконочные шрифты поддерживаются практически всеми браузерами.
• SVG-иконки. Масштабируемая векторная графика (SVG) это основанный на XML формат векторной графики, который может масштабироваться до любого размера без потери четкости. Эти иконки могут отображаться при помощи CSS (с тегами объектов и изображений) или их можно вставить прямо в HTML.
• Наборы символов и пиктограмм.

Наборы и источники

Flaticon

• Формат файлов, тип ресурса: PNG, SVG, EPS, PSD и BASE 64, торговая площадка.
• Лицензия и цена: бесплатный (с ограничениями) и премиальный (от 9,99 долларов/месяц) план.

Flaticon содержит полностью редактируемые векторные изображения. Использовать их можно как в личных, так и в коммерческих проектах. Всего там больше двух миллионов иконок, сгруппированных в 51202 набора.

Adobe Extension позволяет легко импортировать иконки в Photoshop, Illustrator и After Effects.

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

Основные особенности:

• Adobe Extension для CC suite;
• лицензия Linkshare для премиальных вариантов;
• ежемесячное добавление новых наборов иконок.

Премиальная подписка FlatIcon даст вам полные права по части лицензирования, доступ к эксклюзивному контенту, отсутствие рекламы, а также возможность создавать неограниченные коллекции.

Jam Icons

• Формат файлов, тип ресурса: SVG, CSS.
• Лицензия и цена: бесплатно, MIT.

Jam icons это набор из 896 иконок, сделанных вручную. Их можно использовать в веб-проектах и приложениях в виде SVG-файлов, а можно и в виде шрифта с заданными CSS-стилями. Размер иконок — 6px, 24px и 32px. Они могут быть как с заливкой, так и полые.

Fontisto

• Формат файлов, тип ресурса: CSS
• Лицензия и цена: бесплатно, MIT

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

На сайте проекта можно найти полную документацию и различные руководства по началу работы и кастомизации продукта. Чтобы начать использовать иконки, можно просто вставить ссылку на сайте. Но Fontisto можно использовать и с менеджерами пакетов (npm, yarn, bower и т. д.).

Iconmonstr

• Формат файлов, тип ресурса: SVG, EPS, PSD и PNG, торговая площадка.
• Лицензия и цена: бесплатно.

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

Библиотека иконок Pixsellz

• Формат файлов, тип ресурса: SVG, EPS, PSD, PNG, FIG, Material design.
• Лицензия и цена: бесплатно, Apache License Version 2.0.

Огромный пакет, содержащий больше тысячи иконок, разделенных на 16 категорий. Иконки выдержаны в стиле Material design, в трех разных видах: с закруглениями, в виде контуров и двуцветные. Набор доступен в шести форматах файлов, подходящих для различных программ.

Entypo

• Формат файлов, тип ресурса: SVG.
• Лицензия и цена: бесплатно, Creative Common License 4.0.

Entypo это набор svg-иконок, тщательно разработанных несколько лет назад Дэниелом Брюсом из Швеции. Иконки превосходны; если говорить о бесплатных, то они точно лучшие. Всего их в наборе 411, использовать можно бесплатно под лицензией Creative Commons.

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

Evil Icons

• Формат файлов, тип ресурса: SVG, Sketch.
• Лицензия и цена: бесплатно, MIT.

Это очень объемный набор, в котором вы найдете и SVG, и исходные файлы. То есть, можно скачать файлы для Illustrator и .sketch-файлы для Sketch.

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

Streamline icons

• Формат файлов, тип ресурса: ICONJAR, Sketch, FIG, XD, SVG, AI, PDF, PNG.
• Лицензия и цена: от бесплатного использования до $411.

Streamline Icons это еще один бесплатный набор красивых иконок. Всего значков в наборе больше 30 тысяч (они разделены на 53 категории).

Это один из немногих наборов, оптимизированных для Sketch, благодаря чему можно изменять ширину линий и цвет значков. Каждая иконка в Streamline 3.0 представлена в трех вариантах: light, regular и bold.

Компания имеет собственное веб-приложение, позволяющее искать и скачивать иконки при помощи браузера.

Smashicons

• Формат файлов, тип ресурса: JAR, SVG, AI, Sketch, торговая площадка.
• Лицензия и цена: 5 долларов в месяц.

В коллекции Smashicons больше 219 тыс. иконок, совместимых со многими платформами. Есть простое в использовании веб-приложение для поиска значков.

Монетизируется Smashicons несколько иначе, чем другие библиотеки. Здесь есть платная подписка, цена — 5 долларов ежемесячно. За эту сумму вы получаете доступ ко всей уже существующей коллекции, а также ко всем иконкам, которые будут выпущены в дальнейшем.

Icons8

• Формат файлов, тип ресурса: SVG, PNG, PDF.
• Лицензия и цена: Good Boy License, от бесплатного использования до 19,9 долларов в месяц.

В коллекции Icons8 вы найдете больше 120 тысяч иконок разных категорий (бизнес, офис, люди, еда, социальные сети) в разных стилях (в виде контуров, с заливкой, полноцветные). Значки разработаны так, чтобы соответствовали стилю определенной операционной системы. Есть версии для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Перед скачиванием можно воспользоваться веб-редактором.

Icomoon

• Формат файлов, тип ресурса: SVG, PNG, PDF.
• Лицензия и цена: от бесплатного использования до 139 долларов в месяц.

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

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

Также возможно создание собственных иконочных шрифтов.

Glyphish

• Формат файлов, тип ресурса: SVG, PNG, PDF, PSD, Glyph, иконочный шрифт.
• Лицензия и цена: Creative Common Attribution, от $25 до $99.

Glyphish предлагает несколько разных наборов иконок. Каждый набор поставляется в разных форматах, включая PNG, SVG, PSD и AI. Базовый набор иконок доступен по цене в 25 долларов, а расширенный обычно стоит $99. В бесплатной демо-версии вы найдете 50 значков. Все они пригодны для редактирования.

Основные особенности:

• иконки для нескольких платформ (iOS, Android, веб, Windows),
• набор из 50 бесплатных иконок,
• легкое перетаскивание в Xcode,
• размер иконок специально подогнан для дисплеев Apple Retina.

Ionicons

• Формат файлов, тип ресурса: SVG и веб-шрифт, иконочный шрифт.
• Лицензия и цена: бесплатно, MIT.

Команда Ionic решила выпустить свои иконки в качестве шрифта под названием Ionicons. Всего их больше тысячи, они совершенно бесплатны и доступны на GitHub. Вы можете добавить эти иконки на свой сайт, используя CDN-версию таблицы стилей. Полностью поддерживаются SVG и веб-шрифты.

Основные особенности:

• легкое использование путем копипаста ссылки,
• поставляются в виде веб-шрифта,
• подобранные размеры.

Angular Material Icons

• Формат файлов, тип ресурса: SVG, веб-шрифт, Material design.
• Лицензия и цена: бесплатно, Apache License 2.0.

Material Icon это бесплатный набор иконок от Google. Для обеспечения читаемости и четкости эти иконки оптимизированы для всех платформ и дисплеев. Они совершенно бесплатны и доступны на GitHub. В наборе вы найдете больше тысячи значков для самых разных нужд интерфейса.

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

Linearicons

• Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
• Лицензия и цена: от бесплатного использования до $59, Common Creative License.

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

Иконки разделены на разные пакеты (например, Desktop Package) — можно выбирать наиболее подходящий для своих нужд.

Feathericons

• Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
• Лицензия и цена: бесплатно, MIT.

Feather это один из самых популярных наборов иконок open-source. Значки доступны в SVG-формате, всего их больше 250.

Иконки легко редактировать; вне зависимости от размера, выглядят они очень четко. Эти значки изначально разрабатывались в качестве иконочного шрифта, так что с использованием в качестве веб-шрифта проблем не будет.

Iconfinder

• Format: SVG, PNG, ICO, торговая площадка.
• Лицензия и цена: от $9 до $49 в месяц, есть предоплаченный тариф.

Iconfinder это один из самых популярных источников иконок в сети. Он предлагает больше 4 миллионов иконок, предоставляя пользователям широкие возможности для поиска (по формату, цене, размеру, фону и т. д.).

Файлы иконок доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, расширение ранжируется между 16×16 и 512×512. Если не найдете подходящих для себя иконок, можно поработать с лучшими дизайнерами сайта, чтобы создать значки специально для вашего бренда.

The Noun Project

• Формат файлов, тип ресурса: SVG, PNG, торговая площадка.
• Лицензия и цена: Creative Commons License, от $39.99.

The Noun Project предлагает одну из самых обширных библиотек иконок в интернете. Большинство значков доступны в форматах SVG и PNG, в черном и белом стиле.

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

Поиск по библиотеке очень прост. Коллекция насчитывает больше 150 тысяч иконок и регулярно обновляется: ежедневно добавляются новые иконки и наборы.

Иконки Fontawesome

• Формат файлов, тип ресурса: SVG, PNG, иконочный шрифт, торговая площадка.
• Лицензия и цена: SIL OFL 1.1.

Font Awesome это один из самых популярных и самых используемых наборов иконок. Это также дефолтный набор команды Bootstrap. Среди прочих форматов, иконки доступны в формате SVG. Лицензия открыта, иконки можно использовать бесплатно как в личных, так и в коммерческих целях.

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

Основные особенности:

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

Lineicons

• Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
• Лицензия и цена: бесплатно.

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

Иконки представлены как в виде веб-шрифта, так и в виде SVG-файлов, что позволяет выбирать наиболее подходящий вариант для вашего проекта.

Итоги

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

Надеюсь, эта статья поможет вам выбрать наиболее подходящее для вас решение.

Красивые бесплатные иконки для сайта (+ иконки социальных сетей)

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

Скачать исходники для статьи можно ниже

Для использования ниже указанных иконок вам возможно понадобятся бесплатные программы для обработки векторной и растровой графики, которые вы сможете бесплатно скачать, прочитав предыдущую статью данного блога – Бесплатные программы для дизайнера (стартап студии веб-дизайна)

Чтобы применить данные иконки к вашему сайту, рекомендуем вам также прочитать следующие статьи данного блога:
– Иконки для категории
– Иконки для виджетов
– Иконки для сайта

1. Строительные иконки

Сет включает в себя 50 иконок на строительную тематику, выполненных на темно-синем фоне. Формат иконок PNG, ICO, ICONS

Скачать можно здесь: “dryicons.com/free-icons/preview/architecture-blueprint-icons-set/”.

2. Красивые плоские иконки от flattastic

100 красивых иконок в формате PNG, SVG, EPS!

Скачать можно здесь: “flattastic.com/”
Чтобы скачать бесплатно – цену за них ставьте “0” (ноль долларов)!

3. Игровые иконки

Формат иконок “AI”

Скачать можно здесь: “iconstore.co/icons/game-elements-icons/”

4. Иконки Stylistica

Более 100 уникальных иконок. Формат иконок PNG, ICO, ICONS

Скачать можно здесь: “dryicons.com/free-icons/preview/stylistica-icons-set/”

5. Красивые контурные иконки

Формат иконок EPS.

Скачать можно здесь:
“dribbble.com/shots/1811264-Line-Icon-Set”
“behance.net/gallery/20449387/FREE-LINE-ICONS”

6. Зеленые контурные иконки

Формат SVG, векторные и растровые форматы.

Скачать можно здесь:

“dribbble.com/shots/1718718-Free-Icon-Set”
“dribbble.com/shots/1882177-Free-Sketch-Icon-Set”

7. Офисные иконки

Формат иконок “AI”

Скачать можно здесь:

“vecteezy.com/vector-art/98710-vector-office-icon-set”

8. Простые контурные иконки

Формат иконок PSD.

Скачать можно здесь:
“epicpxls.com/freebies/icons/simple-line-icons”

9. Веб иконки

Формат иконок EPS и AI.

Скачать можно здесь:
“vecteezy.com/vector-art/62888-web-icons”

10. Красивые контурные иконки

Формат иконок PSD и SVG.
Скачать можно здесь:
“mnogoblog.ru/wp-content/uploads/2016/01/84icons.zip”

11. Ещё один красивый набор случайных иконок

Формат иконок AI.
Скачать можно здесь:
“dribbble.com/shots/2316420-Random-Stuff-Iconset-vol-3”

Иконки социальных сетей:

1. Бутылочные иконки социальных сетей.

Формат иконок PNG.
Скачать можно здесь:
“sargsyan.deviantart.com/art/Bulb-Social-Media-Icons-158858067”

2. Деревянные иконки социальных сетей.

Формат иконок PNG и PSD.
Скачать можно здесь:
“graphicsfuel.com/2013/09/24-wood-textured-social-media-icons/”

3. Темно-серые иконки

Формат иконок PNG и PSD.
Скачать можно здесь:
“wegraphics.net/downloads/free-dark-social-media-icons/”

4. Симпатичные круглые иконки

Формат иконок PNG и PSD.
Скачать можно здесь:
“graphicsfuel.com/2012/09/15-free-social-media-icons-psd-png/”

5. Треугольные иконки социальных сетей.

Формат иконок AI.
Скачать иконки можно здесь:
“vector4free.com/vector/free-triangle-vector-icons-set/”

6. Прозрачные социальные иконки (только для темных фонов).

Формат иконок PNG.
Скачать иконки можно здесь:
“designbolts.com/2013/09/23/40-free-transparent-social-media-icons-only-for-dark-backgrounds/”

7. 3D иконки социальных сетей.

Формат иконок PNG и PSD.
Скачать иконки можно здесь:
“sixrevisions.com/freebies/icons/isometrica-volume-1-a-free-social-media-icon-set/”

Какие нужны фавиконки — Блог HTML Academy

Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

Но ICO признали все браузеры и научились подключать его не только из корня сайта, но и из произвольного места. Если указать в голове документа <link rel="icon">, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.

<link rel="icon" src="images/my.ico">

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

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

В HTML5 появилось расширенное описание<link rel="icon">: добавился атрибут sizes, чтобы указывать размеры, и атрибут type, чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes. Если иконка векторная — да, так тоже можно — укажите размер any. Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью <link rel="manifest"> на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

{
  "name": "My App",
  "icons": [{
    "src": "64.png",
    "sizes": "64x64"
  }, {
    "src": "128.png",
    "sizes": "128x128"
  }],
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "tomato",
  "background_color": "cornflowerblue"
}

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью <link rel="mask-icon"> для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

<link rel="mask-icon" href="mask.svg" color="red">

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

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

Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!

иконок веб-сайтов — загрузка в векторном формате, PNG, SVG, GIF

иконок веб-сайтов — загрузка в векторном формате, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Поиск

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Интернет сайт

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

Ошибка веб-сайта

+ Коллекция

Сайт знакомств

+ Коллекция

веб-иконки PNG изображений | Векторные и PSD файлы

вектор веб-значок

1007 * 1007

вектор веб-значок

1024 * 1024

веб-символ веб-значок вектор изолированные

4000 * 4000

вектор веб-значок

1199 * 1199

дизайн веб-значков

5120 * 5120

значок всемирной паутины для вашего проекта

5120 * 5120

вектор веб-значок

1007 * 1007

вектор

вектор

вектор значок

1299 * 1299

дизайн веб-значков

5120 * 5120

веб-дизайн значков

5120 * 5120

вектор веб-значок

1299 * 129983

вектор

вектор

1007 * 1007

Всемирный веб-значок дизайн шаблона иллюстрации

4167 * 4167

веб-браузеров значок в стиле линии значок векторной иллюстрации Интернет-программное обеспечение

4000 * 4000

красный градиент значок Интернет-символ

2000 * 2000

значок веб-поиска вектор

1199 * 1199

Интернет на ноутбуке значок плоская линия заполнена серый значок вектор

5556 * 5556

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

1024 * 1024

значок веб-поиска вектор

1007 * 1007

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

1007 * 1007

9 изображений веб-значков в формате png

3000 * 3000

веб-значков

5120 * 5120

веб-значков в виде ромба плоская линия заполнена серым вектором значков

5556 * 5556

«>

музыка облако веб значок плоская линия заполнена серый вектор значок

5556 * 5556

значок всемирной паутины для вашего проекта

5120 * 5120

вектор веб-значок

1024 * 1024

веб-набор значков свяжитесь с нами значки редактируемые

8333 * 8333

вектор веб-значок

1007 * 1007

03

00 простой зеленый стрелка вправо веб-значок бизнес-стрелка

1200 * 1200

желтая простая стрелка веб-значок толстая линия стрелка

1200 * 1200

желтая синяя минималистичная веб-значок стрелки

1200 * 1200

зеленый простой правый значок веб-стрелки

1200 * 1200

зеленый простой значок стрелки вправо веб-значок

1200 * 1200

желтый синий минималистичный значок веб-стрелки значок треугольника

1200 * 1200

розовая стрелка бизнес значок веб значок значок приложения

1200 * 1200

желтый синий минималистичный значок стрелки веб-значок бизнес, указывающий 90 003

1200 * 1200

некоторые значки социальных сетей

1200 * 1200

розовая стрелка бизнес значок веб значок

1200 * 1200

зеленая простая правая стрелка веб значок дорожный знак

1200 * 1200

минималистичная стрелка, указывающая на полосатый значок сети

1200 * 1200

сфера шар вектор шар сияющий свечение кристалл гладкий пустой значок сети 3d реалистичная иллюстрация

5000 * 5000

розовая стрелка обновления бизнес значок значок веб

1200 * 1200

розовая стрелка бизнес значок значок веб пользовательского интерфейса

1200 * 1200

желтый синий минималистичный значок стрелки треугольник веб-значок

1200 * 1200

зеленый минималистичный цикл стрелка круговой значок

1200 * 1200

минималистичная стрелка, указывающая на квадратный значок сети

1200 * 1200

желтая стрелка бизнес-значок значок веб-интерфейса пользовательского интерфейса

1200 * 1200

желтый синий минималистичный квадрат значок стрелки в виде квадрата

1200 * 1200

зеленый простой значок правой полосатой стрелки веб-значок

1200 * 1200

зеленый белый простой веб-значок со стрелкой вправо

1200 * 1200

желтый синий простой крестообразный значок веб-стрелки

1200 * 1200

минималистичная стрелка, указывающая на правый веб-значок

1200 * 1200

розовая стрелка вправо бизнес значок веб-значок

1200 * 1200

зеленая простая изогнутая веб-стрелка

1200 * 1200

минималистичная стрелка, указывающая на линейный веб-значок

1200 * 1200

желтая минималистичная стрелка возврат веб-значок

1200 * 1200

минималистичный веб-значок стрелки, ведущий вниз по бизнесу s значок

1200 * 1200

три желтых синих простых веб-значка с прямой стрелкой

1200 * 1200

желтый красный двусторонний значок бизнес-стрелки значок веб-интерфейса пользовательского интерфейса

1200 * 1200

розовый бизнес-стрелка значок веб-значок значок паузы

1200 * 1200

синий круглый индикатор выполнения страница значок ожидания метка веб-значок

1200 * 1200

черный круглый индикатор выполнения страница значок ожидания метка веб-значок

1200 * 1200

черный синий круговой индикатор выполнения страница значок ожидания метка веб-значок

1200 * 1200

знаки галочки и крестика зеленая галочка ОК и красные значки x на белом фоне простые значки символы графического дизайна да и нет кнопка для решения голосования векторная иллюстрация

6250 * 6250

коллекция иконок для визитной карточки Премиум векторы

1200 * 120 0

набор иконок для электронной коммерции 36 иконок для веб-сайтов и приложений

4000 * 4000

свяжитесь с нами иконки простые плоские векторные иконки на белом фоне

8334 * 8334

вектор значок наушников для

6668 * 6668

Бесплатные иконки скачать для коммерческого использования

Бесплатные иконки скачать для коммерческого использования | Бесплатные иконки SVG, PNG

Хорошо оптимизированные бесплатные иконки в формате SVG и PNG, которые можно использовать при разработке интерфейсов, а также при разработке веб-приложений и приложений.

Все значки хорошо сжаты почти на 60% без ущерба для качества значков SVG и PNG.

Разработано экспертом-художником

Наши значки созданы профессиональным художником, а это значит, что вы получите красивые, высококачественные, четко видимые значки с меньшим количеством кода.

Настройка и создание значков

Используйте редактор значков SVG для создания значков по вашему желанию ИЛИ вы можете настроить их, просто импортировав существующие файлы значков SVG.

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

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

Значок сжатого SVG и PNG

PNG хорошо сжимается без потери качества, а SVG хорошо оптимизирован с удалением ненужных данных для экономии полосы пропускания.

Хорошо категоризованный

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

Часто задаваемые вопросы (FAQ)

Могу ли я использовать иконки даже в коммерческих проектах?

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

Какие форматы доступны?

Все значки доступны в масштабируемом векторном формате SVG, PNG с прозрачным фоном и значках веб-шрифтов.

Какой формат значков следует использовать для веб-сайтов и мобильных приложений?

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

Могу ли я отправлять запросы на значки?

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

Можем ли мы получить новые иконки в будущем?

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

Как я могу получать уведомления о новом значке / обновлении?

Мы постоянно публикуем новые сообщения в нашей социальной сети, поэтому вы можете подписаться на нас в Twitter ИЛИ Facebook получать уведомления об обновлениях!

стрелка вверх © 2021 UXWing. Все права защищены. | Конфиденциальность Политика | Отказ от ответственности

20 лучших мест для поиска бесплатных и премиум файлов значков (2021

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

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

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

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

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

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

Если у вас ограниченный бюджет на ресурсы для дизайна, но вы не хотите ограничиваться только бесплатным выбором значков, Envato Elements — отличный вариант.

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

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

В настоящее время на Elements доступно для загрузки более 17 000 файлов значков, охватывающих огромное количество тем, стилей и форматов файлов.

Количество доступных файлов значков: 17000+

Доступные форматы: AI, PNG, EPS, PSD, SVG, JPG и другие типы файлов. Перед загрузкой проверьте информацию о файле.

Лицензия: Коммерческая лицензия Envato Elements. Вы можете использовать значки в коммерческих или личных проектах, но не для мерчендайзинга, перепродажи или распространения.

Цена: 16,50 долл. США в месяц за неограниченное количество загрузок (годовая подписка). Также доступны ежемесячные планы.

Iconfinder — один из самых популярных ресурсов значков в сети и, по сути, поисковая машина для значков. Он предлагает более 5,5 миллионов иконок в широком диапазоне стилей и категорий.

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

Количество доступных файлов значков: Более 5,5 миллионов

Доступные форматы: PNG, SVG

Лицензия: Бесплатные иконки распространяются под различными лицензиями. Проверяйте перед загрузкой. Все значки премиум-класса выпускаются под лицензией Iconfinder Basic, и вы можете использовать их в личных и коммерческих проектах. Перепродажа и распространение запрещены.

Цена: Некоторые значки доступны бесплатно.Премиум-значки стоят 2 доллара за значок, а пакеты значков — от 9 долларов. Вы также можете выбрать профессиональную подписку, которая дает вам определенное количество кредитов на скачивание каждый месяц. Подписки начинаются от 40,50 долларов в год за 10 загрузок в месяц. Также доступны ежемесячные планы и планы неограниченного скачивания.

Не забудьте использовать наш купон Iconfinder, чтобы получить скидку 50%.

Pixelbuddha — это коллекция бесплатных и премиальных дизайнерских ресурсов, созданных внутренней командой и более чем 100 творческими гостями.Сотни бесплатных иконок доступны в различных стилях и категориях. Большинство наборов значков доступно в форматах SVG и PNG.

Хотя некоторые наборы значков в Pixelbuddha доступны бесплатно, вы получите доступ к большему количеству ресурсов, присоединившись к Pixelbuddha Plus. Это дает вам доступ к новым премиальным ресурсам каждую неделю, включая значки, шрифты, шаблоны, текстуры, анимацию и многое другое, а также специальные предложения только для участников. Вы также можете приобрести премиум-наборы значков в качестве разового заказа.

Количество доступных файлов значков: Тысяч

Доступные форматы: SVG, PNG, PSD

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

Цена: Некоторые файлы значков доступны для бесплатной загрузки. Членство в Pixelbuddha Plus стоит 10 долларов в месяц и дает вам доступ к дополнительным ресурсам премиум-класса.

Не забудьте использовать наш код купона Pixelbuddha, чтобы получить скидку 30%.

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

Вы можете искать значки по ключевым словам или просматривать наборы значков, созданные создателем. Creative Market даже предложит другие активы, которые могут вас заинтересовать. Это может вызвать некоторые варианты, которые вы иначе могли бы не увидеть.

Количество доступных файлов значков: 200000+

Доступные форматы: EPS, JPG, PNG, SVG, AI, PDF, PSD, CDR

Лицензия: Загрузки доступны с выбором лицензии: личная, коммерческая или расширенная коммерческая.

Цена: Наборы иконок по индивидуальной цене от 2 долларов. Большинство из них находятся в диапазоне от 20 до 39 долларов за личную лицензию

.

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

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

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

Количество доступных файлов значков: 130 000+

Доступные форматы: SVG, PNG, PDF, EPS, JPS

Лицензия: Бесплатная лицензия Icons8 позволяет вам бесплатно использовать значки на веб-сайтах, в мобильных и настольных приложениях, но вы должны указать Icons8 и предоставить ссылку.Все платные планы позволяют использовать без указания авторства, но вы не должны перепродавать или распространять значки.

Цена: Иконки доступны бесплатно в ограниченном разрешении. Платные планы использования значков без указания авторства составляют 13 долларов в месяц при загрузке до 100 в месяц и 0,2 доллара за значок в дальнейшем.

The Noun Project предлагает одну из крупнейших библиотек значков, доступных в Интернете, с более чем 3 миллионами значков. Большинство значков этого сайта доступны в форматах SVG и PNG, а большинство значков, доступных на этом сайте, выполнены в черно-белом стиле.

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

Количество доступных файлов значков: Более 3 миллионов

Доступные форматы: PNG, SVG

Лицензия: Вы можете использовать бесплатную загрузку значков для некоммерческих проектов по лицензии Creative Commons с обязательным указанием авторства.Вы можете использовать загрузку значков Pro для коммерческих или некоммерческих проектов, в зависимости от приобретенной лицензии.

Цена: Базовая загрузка бесплатно. 2,99 доллара США за значок при загрузке значка Pro для использования без указания авторства. Подписки на неограниченное скачивание доступны по цене 39,99 долл. США в год.

Freepik — это бесплатный ресурс для дизайнеров, предлагающий сотни тысяч бесплатных и премиальных творческих ресурсов. Файлы значков доступны в форматах PNG, SVG и EPS.

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

Количество доступных файлов значков: 400 000+

Доступные форматы: SVG, EPS

Лицензия: Лицензия Freepik позволяет бесплатное использование в личных и коммерческих проектах с указанием авторства. Премиум-пользователи могут использовать значки без указания авторства.

Цена: Freepik имеет некоторые значки для бесплатной загрузки, но бесплатные пользователи имеют ограничение в 10 загрузок в день.Если вы хотите получить доступ к полной библиотеке без указания авторства, вам необходимо оформить подписку как премиум-член. Стоимость членства от 9,99 долларов в месяц (при ежегодной оплате) для неограниченных загрузок, также доступны планы с ежемесячной оплатой.

GraphicBurger — это библиотека бесплатных графических элементов, созданная румынским дизайнером Раулем Тачиу. Хотя он не обновлял сайт пару лет, он по-прежнему является отличным местом, где можно найти бесплатные наборы значков, некоторые из которых содержат сотни значков.

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

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

Количество доступных файлов значков: Тысяч

Доступные форматы: SVG, EPS, PNG

Лицензия: Лицензия GraphicBurger дает вам право использовать ресурсы в личных или коммерческих продуктах без указания авторства. Перепродажа или распространение иконок запрещено.

Цена: Бесплатно

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

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

Количество доступных файлов значков: 100+ наборов значков

Доступные форматы: AI, EPS, PNG, PSD

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

Цена: Доступны бесплатные наборы иконок. Чтобы загрузить ресурсы премиум-класса, вы можете присоединиться к тарифному плану от 6 долларов в месяц для неограниченных загрузок. Доступно ежемесячное и годовое членство.

Flaticon является дочерней компанией Freepik и является одной из крупнейших баз данных бесплатных иконок в Интернете.

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

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

Количество доступных файлов значков: Более 4,5 миллионов

Доступные форматы: PNG, SVG, EPS, PSD

Лицензия: Бесплатные иконки должны содержать указание авторства. Иконки, загруженные по подписке Premium, можно использовать в личных или коммерческих проектах без указания авторства, но с некоторыми ограничениями.Например, нельзя использовать значки в логотипах, и они не должны быть основным элементом дизайна.

Цена: Некоторые значки доступны бесплатно. Чтобы получить доступ ко всей базе данных, вы должны приобрести членство Premium от 8,25 доллара в месяц (доступны варианты ежемесячной и годовой оплаты).

11. Iconshock

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

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

.

Количество доступных файлов значков: Более 2 миллионов

Доступные форматы: PNG, SVG, EPS

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

Цена: Вы можете скачать иконки бесплатно. Чтобы получить доступ к полным векторным версиям файлов значков и использовать их без указания авторства, премиум-членство стоит от 79 долларов в год или 99 долларов за пожизненный доступ.

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

Иконки представлены более чем 2600 пакетами в широком диапазоне стилей. Вы можете найти значки по ключевым словам, размеру, цвету, лицензии и т. Д.

Количество доступных файлов значков: 500 000+

Доступные форматы: PNG, ICO, ICNS. Вы можете использовать встроенный конвертер для загрузки значков в форматах, включая PNG, BMP, GIF, JPG, PSD, SVG, TGA, TIFF

.

Лицензия: Каждый пакет значков поставляется с собственной лицензией. Некоторые из них не допускают коммерческого использования.Перед загрузкой проверьте файл лицензии каждого пакета значков.

Цена: Бесплатно

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

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

Количество доступных файлов значков: 5,550+

Доступные форматы: SVG, PNG, PDF, Polymer, XAML, CSH, значок шрифта

Лицензия: Каждый пакет значков поставляется с собственной лицензией.Пожалуйста, проверьте права использования перед загрузкой значков.

Цена: Приложение IcoMoon можно использовать бесплатно. Стоимость каждого набора значков взимается отдельно. Доступен бесплатный пакет, содержащий 490 иконок. Премиум-пакеты начинаются от 39 долларов.

14. iconmonstr

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

Каждая иконка на сайте создана одним дизайнером с более чем 15-летним опытом создания иконок.

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

Количество доступных файлов значков: 4,500+

Доступные форматы: SVG, EPS, PSD, PNG

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

Цена: Бесплатно

ZillionDesigns — это сервис с мощной командой, состоящей из более чем 100 000 дизайнеров из более чем 200 стран и территорий по всему миру.

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

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

Количество доступных файлов значков: ограниченное количество бесплатных пакетов значков

Доступные форматы: Бесплатные иконки в основном в формате PNG. Вы можете запросить любой формат, который пожелаете, если начнете конкурс дизайна.

Лицензия: Вы обладаете полными правами на любой дизайн для победившего дизайна после присуждения приза.

Цена: Доступны бесплатные пакеты значков.Если вы хотите заказать свои собственные иконки, вы можете начать «конкурс». Стоимость приза за дизайн иконок начинается с 199 долларов, но вы можете предложить приз более высокой стоимости, если хотите получить больше заявок.

Streamline предлагает одну из самых полных коллекций наборов иконок, доступных в Интернете. Полная коллекция включает более 97 000 векторных иконок в 12 стилях и охватывает множество тем, каждая из которых легко доступна для использования в векторном формате.

Внутренняя команда разрабатывает все значки и периодически добавляет новые значки в коллекцию.Существует настольное приложение для поиска, просмотра и настройки значков и плагинов, чтобы использовать их непосредственно в программном обеспечении, включая Sketch, Adobe XD, Figma и Powerpoint.

Количество доступных файлов значков: 97 000+

Доступные форматы: SVG, PNG

Лицензия: Вы можете использовать значки PNG бесплатно с указанием авторства в любых проектах, включая логотипы и шаблоны, но вы не можете их распространять. Премиум-лицензия позволяет неограниченное использование в коммерческих проектах при условии, что вы используете не более 100 иконок для каждого проекта.

Цена: 19 долларов в месяц за доступ к полному набору значков с 5-дневной бесплатной пробной версией. Вы можете бесплатно скачать иконки с низким разрешением в формате PNG.

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

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

Вы также можете запросить пользовательские значки в стиле существующих наборов значков.

Количество доступных файлов значков: 15000+

Доступные форматы: AI, EPS, SVG, PNG

Лицензия: Вы можете использовать бесплатные иконки в коммерческих и некоммерческих проектах, но вы должны ссылаться на Icojam. Вы можете использовать значки Premium по стандартной лицензии без указания авторства, но вы не можете использовать их на товарах для продажи или в качестве логотипов.

Цена: Бесплатные иконки доступны в блоге Icojam. Наборы значков премиум-класса продаются по индивидуальной цене от 5 долларов. Пользовательские значки можно заказать от 15 долларов за значок при минимальной стоимости заказа 100 долларов.

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

Значки имеют открытый исходный код и доступны для использования или редактирования.Каждый символ доступен в пяти темах и различных размерах и плотности.

Количество доступных файлов значков: 26000+

Доступные форматы: Webfont, SVG, PNG, XAML

Лицензия: Открытый исходный код и бесплатное использование в любых проектах

Цена: Бесплатно

Glyphish предлагает коллекцию из более чем 2200 контурных и заполненных значков, созданных дизайнером Джозефом Уэйном. Значки предназначены в первую очередь для использования в приложениях iOS, но они также подходят для Android, Windows Mobile, веб-сайтов и других целей.

Каждый набор значков включает значки размеров @ 2 и @ 3x Retina-ready, и все значки готовы для загрузки в Xcode. Исходные файлы эскиза включены.

Количество доступных файлов значков: 2,200+

Доступные форматы: PNG, SVG, Sketch

Лицензия: Лицензия Glyphish позволяет использовать в личных или коммерческих проектах, но их нельзя перепродавать или распространять.

Цена: Бесплатный пакет из 50 иконок, доступный при ссылке на сайт Glyphish.Полный комплект из 2220 иконок стоит 99 долларов.

20. Дизайнерские бомбы

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

Количество доступных файлов значков: Десятки наборов значков

Доступные форматы: SVG, EPS, PNG, AI

Лицензия: Бесплатное использование в личных и коммерческих проектах без указания авторства права.

Цена: Бесплатно

Последние мысли

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

Если вы владелец сайта, вы, вероятно, даже не знаете, с чего начать, когда дело доходит до создания собственных иконок.

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

Мы надеемся, что этот список немного облегчил вам жизнь, дав вам множество новых мест для поиска файлов значков. Вы также можете ознакомиться с нашими списками лучших кистей Photoshop, лучших инструментов для создания прототипов и лучших сайтов, чтобы найти проекты и элементы PSD.

Похожие сообщения

20 лучших бесплатных наборов значков

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

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

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

Ниже мы выбрали 20 наших любимых наборов значков и ресурсов для ваших проектов. Все они бесплатны, но обязательно ознакомьтесь с лицензией каждого из них, так как некоторые требуют указания авторства, некоторые бесплатны только для личной работы и т. Д. Вот они, для всех ваших творческих потребностей:

1. Noun Project

2. Значки Material Design

3. Icons8

4. Softies

5. iOS Edge

6. Linear

7. Ionicons

8. Jam

9. Font Tonicons

10. Смешанные компьютерные иконки

11. Wix

18. Streamline

19. Иконки Simple Line

20. Minimal Icons

21. 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. Линейные значки

Формат: 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 доступны в версиях 32px и 64px. Обратите внимание, что это бесплатно только для личного использования. Для коммерческих целей 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 не дает никаких гарантий в отношении этих брендов и их соответствующих услуг, а также не поддерживает эти услуги для каких-либо конкретных целей.

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

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

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

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

1. Бесплатный минимальный пакет значков

Этот бесплатный минимальный набор значков содержит 1800 значков в форматах SVG, EPS, PSD, AI, SKETCH и PNG. Набор иконок представлен как в черном, так и в белом вариантах и ​​может использоваться как в личных, так и в коммерческих проектах.

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

Набор значков от Icons8 включает более 40000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей. Значки предназначены для имитации внешнего вида конкретной операционной системы, и вы можете загрузить их в версиях для Windows, iOS и Android.Все значки можно перекрашивать, есть даже приложения для Windows и Mac, чтобы вы могли использовать их в таких приложениях, как Photoshop.

3. Eldorado + Stroke 3132 Mini Free Icons

Eldorado + Stroke 3132 mini — это бесплатная версия значков Eldorado + Eldorado Stroke, которая содержит в общей сложности 3132 значка в формате PNG. Значки одноцветные и включают в себя такие категории, как «Базовый», «Культура», «Устройства», «Финансы» и т. Д.

4. Iconmonstr

Коллекция иконок

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

5. 48 бесплатных иконок Flat Designer

Этот бесплатный набор из 48 иконок для офиса, социальных сетей и путешествий наверняка пригодится для вашего следующего проекта, связанного с путешествием или корпоративным веб-сайтом. Иконки доступны в формате AI и PNG и представлены в ярком монохромном коралловом и многоцветном вариантах.

6. Пакет значков социальных сетей

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

7. 210 Миниконы вектора

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

8. Набор изометрических значков 30

Если ваш проект вращается вокруг бухгалтерской отрасли, рассмотрите этот набор из 30 изометрических значков с диаграммами, графиками, папками и т. Д. Иконки представлены в форматах AI, EPS и PNG и могут быть полностью отредактированы по своему усмотрению в Adobe Illustrator.

9. Ретро-иконы

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

10. Набор иконок Metro UI

Поклонникам стиля Metro стоит попробовать набор иконок Metro UI, который включает более 700 иконок двух размеров. Значки доступны в формате PNG, а также в формате .ICO.

11. 40 Иконок дизайна

Еще один набор значков дизайна в векторном формате, в набор входит 40 значков, доступных в различных форматах, включая AI, EPS, SVG и PNG. Этот набор отлично подойдет для портфолио дизайнера или любого художественного сайта.

12. 83 Плоские значки пользовательского интерфейса и электронной коммерции

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

13. 30 Иконки погоды

Этот набор иконок погоды — отличный выбор для любого погодного приложения или метеорологического веб-сайта.Вы можете выбрать один из 30 различных значков в форматах ЭСКИЗ и PNG.

14. Набор иконок «Земля и космос»

Если вам когда-либо были нужны значки, охватывающие все, от Земли до космоса, не ищите ничего, кроме этого пакета. Созданный специально для журнала Smashing Magazine, набор содержит значки спутников, планет, метеоров, воздушных шаров и даже странных морских существ.

15. Набор иконок Nucleo Flat Business

Последний набор в нашем списке включает 50 иконок в современном плоском стиле, которые дополнят любой корпоративный сайт.Иконки доступны как в формате AI, так и в формате SVG.

Руководство для новичков по добавлению значка на свой веб-сайт

Вы можете встретить термин favicon, когда речь идет о веб-дизайне и разработке. Но что это такое? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить значок на свой сайт. Давайте начнем!

Что такое Favicon и почему он важен?

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

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

Как добавить значок на свой сайт?

Выберите один из двух способов ниже, чтобы добавить значок на свой веб-сайт!

Разрешить браузерам автоматически создавать значок

Самый простой способ добавить значок на свой сайт — это загрузить его как .png или .ico из Файлового менеджера вашего хостинга . Для этого выполните следующие действия:

1. Подготовьте квадратное изображение в формате .png или .ico для логотипа вашего веб-сайта.
   

   Если у вас уже есть файл .png , используйте его. Однако конвертируйте изображение в формат .ico с помощью ConvertICo.com, если вам когда-нибудь понадобится.

2. Переименуйте изображение .png или .ico в favicon .
   

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

3. Получите доступ к папке public_html , перейдя в hPanel, затем в Диспетчер файлов -> Перейти в диспетчер файлов .
   
4. Загрузите файл favicon.png или .ico в папку public_html . Перезагрузите свой сайт, и вы увидите значок.

Загрузите обычное изображение и отредактируйте файл header.php своей темы

Кроме того, если у вас есть изображение, отличное от формата .png или .ico (jpg, BMP, gif и т. Д.), Вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл header.php в папке с используемой в данный момент темой. Для этого выполните следующие действия в hPanel.

1. Как только у вас будет квадратное изображение в качестве логотипа, перейдите в Диспетчер файлов -> Перейти в Диспетчер файлов -> public_html .
2. Загрузите изображение в папку public_html .
   

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

3. Перейдите в папку wp-content -> themes . Затем войдите в папку с темой, которую вы используете в данный момент.
4. Откройте файл header.php и вставьте следующий синтаксис непосредственно перед концом тега :

   Измените части / jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать.

5. После сохранения изменений изображение должно отображаться как значок вашего веб-сайта.

Если вы не видите новый значок, очистите кеш браузера и перезапустите его.

Заключение

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

Вы можете добавить его автоматически, загрузив изображение .png или .ico с именем favicon в папку public_html . Кроме того, вы можете загрузить обычное изображение (jpg, BMP, gif и т. Д.) И изменить файл header.php в папке используемой в данный момент темы.

Было ли это руководство полезным? Оставьте комментарий ниже!

Линас начинал как агент по работе с клиентами, а сейчас является полнофункциональным PHP-разработчиком в Hostinger.