# Welcome to Cryptofonts

Cryptofonts is a collection tokens and icons for developers and designers.

We offer a token API, webfonts and SVG icons.

You can find more information at <https://cryptofonts.com/>

### Read the API documentation

{% content-ref url="/pages/PxNM14Sv2S6sJhpcVCV1" %}
[api](/api/how-to-use-the-api)
{% endcontent-ref %}

### Read the Webfont documentation

{% content-ref url="/pages/WBDpXG6lhaLrlHGQfCkg" %}
[Webfonts](/webfonts/quickstart-guide)
{% endcontent-ref %}


# How to use the API

{% hint style="info" %}
All tokens contained in the API are collected from “safe” sources and do not include scam tokens or fraudulent projects.
{% endhint %}

With this API you'll be able to retrieve blockchain data for a multitude of tokens just by providing the chain ID and the token address. We are currently tracking tokens on more than 12 chains. Please see the chain IDs section below for a full list.

{% hint style="warning" %}
To be able to consume the API you will need an API key. \
[Register your account and request your API key](https://rapidapi.com/cryptofonts/api/cryptofonts-token-icon-api1)
{% endhint %}

By using the Cryptofonts API you will receive the following information for each token:

* Token name
* Logo (png)
* Token Symbol
* Chain ID
* Decimals
* Token address
* Chain name


# Endpoints

## 👉 Get token details by chain ID and token address

<mark style="color:green;">`GET`</mark> `/{chainId}/{address}`

We recommend using this endpoint over the next one if you are working on a specific chain as requesting by address only can return more than one result if there are other token with the same address on other chains.

{% hint style="info" %}
You can pass checksum and non-checksum addresses
{% endhint %}

**Headers**

| Name          | Value              |
| ------------- | ------------------ |
| Content-Type  | `application/json` |
| Authorization | `Bearer <token>`   |

**Body**

| Name      | Type    | Description     |
| --------- | ------- | --------------- |
| `chainId` | integer | Chain number ID |
| `address` | string  | Token address   |

**Response**

{% tabs %}
{% tab title="200" %}

```json
[
    {
        "name": "Uniswap",
        "logoURI": "https://xkqpczltzicnmbqvihbc.supabase.co/storage/v1/object/public/logos/uni_7687.png",
        "symbol": "uni",
        "chainId": 1,
        "decimals": 18,
        "address": "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984",
        "chain": "ethereum"
    }
]
```

{% endtab %}

{% tab title="400" %}

```json
{
"error":"No data found {address} on chain {chainId}"
}
```

{% endtab %}
{% endtabs %}

## 👉 Get token details by address

<mark style="color:green;">`GET`</mark> `/{address}`

\<Description of the endpoint>

**Headers**

| Name          | Value              |
| ------------- | ------------------ |
| Content-Type  | `application/json` |
| Authorization | `Bearer <token>`   |

**Body**

| Name      | Type   | Description   |
| --------- | ------ | ------------- |
| `address` | string | Token address |

**Response**

{% tabs %}
{% tab title="200" %}

```json
[
    {
        "name": "Uniswap",
        "logoURI": "https://xkqpczltzicnmbqvihbc.supabase.co/storage/v1/object/public/logos/uni_7687.png",
        "symbol": "uni",
        "chainId": 1,
        "decimals": 18,
        "address": "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984",
        "chain": "ethereum"
    }
]
```

{% endtab %}

{% tab title="400" %}

```json
{
"error":"No data found for {address}"
}
```

{% endtab %}
{% endtabs %}


# Chain IDs

When making a request where the chain ID is needed use the table below to refer to the correct chain.

| Chain name    | ID         |
| ------------- | ---------- |
| Arbitrum      | 42161      |
| Avalanche     | 43114      |
| Aurora        | 1313161554 |
| Base          | 8453       |
| BSC           | 56         |
| Canto         | 7700       |
| Cronos        | 25         |
| Ethereum      | 1          |
| Fantom        | 250        |
| Gnosis        | 100        |
| Linea         | 59144      |
| Optimism      | 10         |
| Polygon       | 137        |
| Polygon zkEVM | 1101       |
| Pulsechain    | 369        |
| Solana        | 1399811149 |
| ZkSync        | 324        |


# Quickstart guide

If you are looking to try out Cryptofonts you can use our CDN instead of hosting it yourself.

Simply add the current one-liner at the `head` of your document to use the latest version.

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

If you find yourself stuck, or it’s the first time using a Webfont, you can download our quickstart template to see how it works.

{% embed url="<https://cryptofonts.com/getting-started-template.zip>" %}

If you want to use a previous version of Cryptofonts visit this section for more information.

[Previous versions](/webfonts/previous-versions)

***

## Npm install

Cryptofonts is also available as an npm package.

To install run the following command from within your project.

```
npm i @cryptofonts/cryptofont
```

***

## Manual install

If you decide to manually install Cryptofonts and host it on your website, download the latest release of Cryptofonts from GitHub to get started.

[Download the latest release from GitHub](https://github.com/monzanifabio/cryptofont/releases)

### **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).

### **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.

```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.

```html
<body>
	<!--some icons-->
	<i class="cf cf-btc"></i>  <!-- Bitcoin -->
	<i class="cf cf-eth"></i>  <!-- Ethereum -->
	<i class="cf cf-ltc"></i>  <!-- Litecoin -->
</body>
```


# Implementations

## Flutter

Cryptofonts is available as a [Flutter package](https://pub.dev/packages/cryptofont).

`SDK | Flutter` `PLATFORMS | Android, OSX, Linux, MacOS, Web, Windows`

### Installing

```
flutter pub add cryptofont
```

This will add a line like this to your package's pubspec.yaml (and run an implicit `flutter pub get`)

```json
dependencies:
  cryptofont: ^1.0.2+1
```

Alternatively, your editor might support `flutter pub get`

Check the docs for your editor to learn more.

### Import it

Now in your Dart code, you can use:

```dart
import 'package:cryptofont/cryptofont.dart';
```

### Usage

```dart
import 'package:cryptofont/cryptofont.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // Get the icon code if you need it
    final code = cryptoFontIconMapping[symbol.toLowerCase()];

    return Row(
      children: [
        // Use directly
        const Icon(CryptoFontIcons.btc),
        // Or by using the symbol
        Icon(CryptoFontIcons.fromSymbol("BTC")),
        // Case insensitive, this works too
        Icon(CryptoFontIcons.fromSymbol("btc")),
      ],
    );
  }
} 
```

### Example

**`example/lib/main.dart`**

```dart
import 'package:cryptofont/cryptofont.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const CryptoFontGalleryApp());
}

class CryptoFontGalleryApp extends StatelessWidget {
  const CryptoFontGalleryApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CryptoFont Flutter Gallery',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: const CryptoFontGalleryHome(),
    );
  }
}

class CryptoFontGalleryHome extends StatefulWidget {
  const CryptoFontGalleryHome({
    super.key,
  });

  @override
  State<CryptoFontGalleryHome> createState() => _CryptoFontGalleryHomeState();
}

class _CryptoFontGalleryHomeState extends State<CryptoFontGalleryHome> {
  final TextEditingController _searchController = TextEditingController();
  String searchedTerm = "";

  @override
  void initState() {
    _searchController.addListener(() {
      setState(() {
        searchedTerm = _searchController.text;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("CryptoFont Flutter Gallery"),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              TextField(
                controller: _searchController,
                decoration: const InputDecoration(
                    hintText: "Search by ticker...",
                    hintStyle: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                    ),
                    suffixIcon: Icon(Icons.search)),
              ),
              const SizedBox(height: 20),
              Expanded(
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return GridView.count(
                      crossAxisCount: constraints.maxWidth ~/ 100,
                      children: cryptoFontIconMapping.entries
                          .where((element) => element.key
                              .toUpperCase()
                              .startsWith(searchedTerm.toUpperCase()))
                          .map((e) {
                        final symbol = e.key;
                        return Column(
                          children: [
                            Icon(CryptoFontIcons.fromSymbol(symbol), size: 36),
                            const SizedBox(height: 10),
                            Text(symbol,
                                style: const TextStyle(
                                    fontWeight: FontWeight.w500)),
                          ],
                        );
                      }).toList(),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```


# Previous versions

If you want to use a previous version of Cryptofonts here are the available CDN versions.

### Version 1.4.0

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

### Version 1.3.5

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

### Version 1.3.1

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

### Version 1.3.0

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

### Version 1.2.0

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

### Version 1.1.0

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

### Version 1.0.2 (Legacy version)

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

### Version 1.0 Genesis release

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