Documentation

Install and use Solana Icons in your React project.

Installation

npm i @iconsol/react
# or
pnpm add @iconsol/react
# or
yarn add @iconsol/react

Basic Usage

Import any icon as a named export. Each component accepts standard SVG props plus a size prop.

import { Jup, Phantom, Raydium, Sol } from "@iconsol/react";

export default function App() {
  return (
    <div>
      <Sol size={32} />
      <Jup size={24} />
      <Phantom size={24} className="text-purple-400" />
      <Raydium size={20} color="#9945ff" />
    </div>
  );
}

Props

Prop	Type	Default	Description
`size`	number \| string	24	Width and height of the icon
`color`	string	currentColor	Icon color
`className`	string	—	CSS class names
`...props`	SVGProps	—	Any standard SVG attribute

Tree Shaking

The package is fully tree-shakeable. Only the icons you import are included in your bundle.

// ✅ Only the Jup component is bundled
import { Jup } from "@iconsol/react";

// ✅ Also works — still tree-shaken by bundlers
import { Jup, Phantom } from "@iconsol/react";

Available Icons

Browse and search all available icons on the home page. Click any icon to see the exact import name.

JSON API

A public, read-only HTTP API for fetching logo metadata. Served with CORS enabled and cached at the edge.

# List & search
GET https://iconsol.me/api/logos
GET https://iconsol.me/api/logos?q=jupiter
GET https://iconsol.me/api/logos?category=defi

# Fetch one by id
GET https://iconsol.me/api/logos/jup

Response shape:

{
  "id": "jup",
  "name": "Jupiter",
  "ticker": "JUP",
  "category": "tokens",
  "tags": ["governance", "dex", "aggregator"],
  "aliases": ["jupiter", "jup.ag"],
  "website": "https://jup.ag",
  "description": "Jupiter is Solana's leading swap and routing layer ...",
  "relatedIds": ["jupsol", "jupusd", "jupiter-lend", "sol"],
  "src": "https://iconsol.me/brand/jup.svg"
}

MCP Server

Use iconsol from Claude Desktop, Cursor, Windsurf, or any MCP-aware client. Add the endpoint once and the assistant can look up any Solana logo on demand.

// mcp.json
{
  "mcpServers": {
    "iconsol": {
      "url": "https://iconsol.me/api/mcp"
    }
  }
}

Two tools are exposed:

search_logos({ query?: string, category?: "tokens"|"defi"|"wallets"|"nft"|"infrastructure"|"all" })
  → { count, logos: Logo[] }

get_logo({ id: string })
  → Logo