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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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