CryptoIcons — библиотека иконок криптовалют в Figma, Webfont, SVG-спрайте для разработчиков и дизайнеров

CryptoIcons — библиотека иконок криптовалют в Figma, Webfont, SVG-спрайте для разработчиков и дизайнеров

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

Как родилась идея?

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

Некоторые клиенты брали иконки с CoinMarketCap, тут есть ряд минусов:

  1. Иконки там в .png и маленького размера;
  2. Отсутсвие возможности для кастомизации;
  3. Ручная работа с каждой иконкой, так как файл иконки не соответствует названию криптовалюты;
  4. Вес иконки больше векторного аналога.

Другие находили сеты иконок в интернете, вариант тоже не без минусов:

  1. Чаще всего попадаются очень ограниченные сеты иконок на 100-150 штук;
  2. Очень много неактуальных, устаревших иконок;
  3. Сложная ручная кастомизация каждой иконки.

После поиска очередного сета иконок для проекта я решил создать свой набор.

Набор иконок

Главное преимущество моего набора – легкая кастомизация иконок под стиль проекта как в фигме, так и при подключении к проекту в CSS.

Все иконки отрисованы в векторе, именуются и вызываются по тикеру.

Набор содержит топ 600 иконок с CoinMarketCap и все коины с Binance.

Дизайнерам

Все иконки я упаковал в компонент Фигмы, сделал несколько пресетов, вот так это выглядит:

Набор иконок в фигме, слева основной компонент с иконками, справа – пресеты. 
Набор иконок в фигме, слева основной компонент с иконками, справа – пресеты. 

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

Для разработчиков

Все иконки – в Webfont, получился аналог FontAwesome, но с иконками криптовалют. Для вывода иконки в своем проекте нужно подключить шрифт и файл стилей, а потом вызвать нужную иконку:

<span class="cryptoicon icon-USDT"></span>

для разработчиков тоже сделал несколько пресетов: белая иконка на черном фоне, черная иконка на белом фоне, иконка своего оригинального цвета на белом фоне, фон цвета оригинальной иконки и белая иконка:

Варианты преднастроенных стилей иконки в css.
Варианты преднастроенных стилей иконки в css.

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

<span class="USDT-color-bg"></span>

Код выше применит к элементу <span> фон цвета иконки USDT. А вот так задается цвет элемента:

<span class="USDT-color"></span>

Есть и другие варианты подключения и использования иконок. Можно подключить svg-спрайт со всеми иконками и вызывать иконки таким способом:

<svg><use xlink:href="cryptosymbol.svg#icon-USDT"></use></svg>

Можно использовать svg штучно, в папке с svg иконками все иконки именуются по тикеру.

Монетизация

Есть три варианта покупки набора:

  • Полный набор (svg, svg-спрайт, webfont, Figma) – 20$
  • Набор дизайнера (svg, Figma) – 12$
  • Набор разработчика (svg, svg-спрайт, webfont) – 12$

Разовая покупка, подписок нет. Вышла новая версия – можно купить еще раз или использовать старую, если ее хватает. В данный момент автоматизированно купить набор можно за USDT, LTC, ETH, BTC, возникли сложности с подключением карточного процессинга и получения оплат из-за рубежа. Бесплатно можно скачать весь набор иконок в png, большого размера и прозрачные.

Поддержка

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

Команда

Над проектом работаю с супругой, она отрисовала большую часть иконок, а я сделал сайт, упаковал иконки в шрифт, svg-спрайт.

Реклама

С рекламой у меня сложности, пока как идеи:

  • Реклама в директе, по поисковым запросам;
  • Посты в пабликах для дизайнеров и разработчиков;
  • Посты в Reddit;
  • Надежда что сайт попадет в выдачу поисковиков по соответствующим запросам.

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

44
5 комментариев

за старания - 5+

Но с точки зрения коммерции - кому нужен такой сет? Обычно нужно не больше 3-5 и их легко можно нагуглить в комьюнити прямо в фигме.

1
Ответить

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

Ответить

Непонятно, за что платить.

Пользуюсь http://cryptoicons.co.

Там иконка битка тоже под наклоном, как у вас. Какое совпадение 😀

А где ещё она под наклоном?

1
Ответить

Тут меньше токенов, нет шрифта, некоторые логотипы токенов устарели, оригинальный логотип битка наклонен сам по себе.

Ответить