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

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

Blugraphic – варианты PSD, PNG и векторных иконок. Поиск ограничен тегами, но можно подписаться на рассылку и еженедельно получать бесплатную подборку по электронной почте.

Icon Shock – это тысячи бесплатных иконок для личного использования. Чтобы применить картинку в коммерческом проекте, нужно внести разовый платёж.

CSS Author предлагает еженедельные подборки лучших бесплатных иконок в сети.

Хотите свежих иконок? На Creative Tail есть наборы, которых больше нигде не найти.

All-Free-Download предлагает лёгкий поиск и прямые загрузки PSD, PNG и векторов.

Ego Icons предлагает более 1500 премиальных иконок и 100 бесплатных векторных значков. Посетите также дочерние сайты, кликнув по кнопкам верхней навигационной панели.

На AlienValley представлен широкий ассортимент иконок высокого качества в обмен на ваш адрес электронной почты.

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

1001 Free Downloads специализируется на плоских иконках, представленных множеством прекрасных и причудливых вариантов.

На Pixeden можно искать иконки в нескольких размерах. Здесь широкий выбор от 16х16 до 512х512 в формате PNG.

NounProject – это удобный поиск, лёгкая загрузка и высокое качество иконок. Ссылка на автора обязательна. Членство с ежемесячным взносом снимает ограничения на скачивание.

Iconmonstr предлагает иконки в нескольких размерах без указания авторства.

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

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

Вот, например, один SVG-спрайт в 4-х разных размерах, исходный - 32px:

SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.

Иконки для дизайна можно взять из готовых наборов или нарисовать свои.

Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью use .

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

Большая коллекция, иконки удобно поделены на категории . Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.

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

• Adobe Illustrator - по-моему, лучший. 599 руб./месяц в составе подписки на Creative Cloud;
• Inkscape - бесплатный и не очень удобный;
• Sketch - для Mac OS, $79.99. Имеет некоторые проблемы с векторизацией обводок, но вообще довольно удобный.

Готовый SVG-файл обычно содержит много лишнего, но при этом хорошо поддается оптимизации. Из кода удаляются ненужные атрибуты, пробелы и переносы, а в числах уменьшается количество знаков после точки. Вес файла уменьшается на 30-50%. Инструменты для оптимизации:

grunt-svgmin - задача для Grunt с использованием svgo . При этом файлы сами будут браться из папки с исходниками, оптимизироваться и складываться в папку с результатами. Очень удобно.

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

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные .

Свой шрифт можно сделать, например, на сайте icomoon.io/app/ . Примерная последовательность действий:

Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии , а в некоторых других браузерах вместо иконок может оказаться всё что угодно:

Картинка из статьи Криса Коэра Icon System with SVG Sprites . Я на этом же месте как-то видела иероглифы, но сейчас там SVG, так что скрин сделать не получится. CSS-tricks , кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.

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

Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

Как существуют способы вставки SVG на страницу?

Плюсы:

• короткий читабельный код;
• картинка кешируется;

Минусы:

• запрос к серверу;
• в старых Операх фоновый SVG поддерживается странно: могут возникать проблемы при добавлении рамки элементу с SVG-фоном, а в Opera Mini работают только фоны без viewBox;
• иконки в спрайте недоступны для стилей страницы;
• большие спрайты могут вызывать проблемы с производительностью.

Плюсы:

• нет запроса к серверу.
• хорошая поддержка браузерами: все, кроме Оперы на Presto и старых IE.

Минусы:

• картинка не кешируется и каждый раз рендерится заново;
• длинная строка в CSS;
• не читабельно: по коду непонятно что он содержит;
• закодированная картинка может весить больше исходной;
• для закодирования/раскодирования нужны дополнительные инструменты;
• иконки недоступны для стилей страницы.