Beautifully crafted cryptocurrencies fonts and icons for your projects.

Cryptofonts is the biggest open-source library with more than 1500 CSS and SVG Icons

No signup SVG and Fonts Developer friendly GPL License

Getting started Show me the font
Cryptofonts - Beautifully crafted crypto fonts and icons for your projects | Product Hunt

Features

Crypto Fonts gives you scalable vector icons that can instantly be customized by size, color, shadow, and anything that can be done with the power of CSS.

bitcoin logo

One font,1500+ icons

Lightweight

No Javascript

Infinite scalability

CSS controls

Retina ready

Compatibility

sketch icon

Sketch App

photoshop icon

Photoshop

illustrator icon

Illustrator

adobe xd icon

Adobe XD

figma icon

Figma

invisio studio icon

InVision Studio

Products

Utility Font

Create beautiful dApps with our utility font. Every icon is professionally designed and pixel perfect at every resolution.

Go to the font

Icons

This beautiful SVG icon collection includes some of the most popular crypto projects and continues to expand.

Go to the icons

Crypto Font

Crypto font is the original collection of more than 1500 icons that you can use for free in all your crypto projects.

Go to the font

Get Started

Quick start

Looking to quickly add Cryptofonts to your project? Use CryptofontsCDN
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

Download the template
  • index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/monzanifabio/cryptofont/cryptofont.css">

Install with npm

$ npm i @cryptofonts/cryptofont

The manual way

Grap a copy of the latest version of Crypto Fonts and use it alongside your source code.

1. Move the CSS and web fonts into your project.

Copy the entire webfonts folder and the cryptofont.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

transfer files

2. Reference the CSS

Add a reference to the cryptofont.css styling file into the <head> of each template or page that you want to use Crypto Font on. Pay attention to the pathing of your project and where you moved the files to in the previous step.

  • index.html

<head>
<!--CryptoFont-->
<link href="cryptofont.css"rel="stylesheet">
</head>

3. Place icons in your UI’s markup

With the references complete, you can now start placing icons in your HTML’s <body> We recommend using a consistent HTML element, like an <i> You can place Crypto Fonts icons just about anywhere using the CSS Prefix cf and the crypto ticker.

  • index.html

<body>
<!--some icons-->
<i class="cf cf-btc"></i>  
<i class="cf cf-eth"></i>  
<i class="cf cf-ltc"></i>  
</body>

Other implementations

flutter-logo

Flutter

Featured on