Веб-Острова Анатолия Куликова

Обзор Icons8 — гибкая библиотека иконок

Обзор Icons8 — гибкая библиотека иконок

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

Традиционная схема использования для меня выглядела так:

  1. Понимаю, что нужна иконка
  2. Открываю flaticon или iconfinder и ищу по их базе
  3. Скачиваю понравившиеся
  4. ???
  5. Profit Вставляю в нужное место

Гуляя по просторам интернета, мне попался любопытный проект — icons8.com. С одной стороны может показаться, что это ещё один сервис с иконками, которых достаточно много — аж целых 52 900 штук, и всё это почти бесплатно. Почему? Бесплатно можно скачать только иконку в формате png максимальным размером 100px — вот это, пожалуй, единственный существенный минус (ибо есть куча сервисов, где примерно такие же иконки бесплатно доступны в векторе).

За 20$ в месяц ограничения по размерам снимаются и появляется возможность скачать уже форматами svg, eps, pdf (зачем? 0_о).

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

Но Icons8 меня порадовал другими преимуществами — их и рассмотрим подробно.

Гибкая онлайн-библиотека

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

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

sail-boat

Это базовый пример. Но мы пойдем дальше и передадим сервису параметры цвета и размера:

 

sail-boat

После основной ссылки мы указываем в HEX любой цвет, а через слэш — размер. Реализация очень крутая, весьма доставляет. И нужные параметры задаются очень просто, что даёт большой простор для творчества и фантазии. И кстати — для скачивания сервис ограничивает размер скаченного файла в 100px, однако если запросить ссылкой с сервиса — отдаёт большего размера иконки.

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

Мы его вставляем на свой сайт в нужное место. Но если мы просто так вставим и оставим — ничего не взлетит, так как браузер не понимает, что это такое вообще и как с ним работать. Нужно подключить скрипт-обработчик, причём двумя способами. Самый простой способ — с помощью jQuery:

Или если у Вас работает AngularJS, тогда используем следующий код:

После подключения этого скрипта всё работает. Честно, я не могу себя назвать знатоком интернета, но такого функционала я не встречал.

Но и на этом разработчики решили не останавливаться и продолжили развивать возможности своего сервиса дальше.

Приложение icons8 для Windows и Apple

Приложение-каталог для Windows и MacOS (для последнего доступен и в AppStore — всё серьёзно). Интерфейс минималистичный и понятный — только фильтр стилей и поиск.

Однако самое главное — это приложение позволяет сразу перетащить иконку с помощью drag-and-drop в нужную программу: поддерживает графический пакет Adobe, Visual Studio, и работает даже в офисных программах типа Word и PowerPoint, и сервисе GoogleDocs.

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

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

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

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

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

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн

Статьи по теме

Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Определяем устройство с помощью PHP

Определяем устройство с помощью PHP

Библиотека для определения устройства пользователя
Фильтры Instagram для вашего сайта

Фильтры Instagram для вашего сайта

Таблица стилей с фильтрами из Инстаграмма