Ícones de bancos, cartões e carteiras do Brasil para React

Um componente por banco, cartão ou carteira — fiel à marca, tipado e com metadados: nome, código COMPE (quando aplicável) e cor. Feito para telas de Pix, extratos e seletores de conta.

ícones · TypeScript · ESM + CJS · React ≥ 17 · MIT

Bancos, cartões e carteiras

Clique em um card para copiar o import do componente · clique no badge URL para copiar o link direto do SVG.

API de ícones por URL

Sem instalar nada: cada ícone é servido como SVG estático neste GitHub Pages, endereçado pelo slug do banco, cartão ou carteira — funciona direto em <img>, CSS (background-image) ou apps mobile/backends que só precisam de uma URL.

// padrão: https://henriquezolini.github.io/react-bancos/icons/<slug>.svg
<img src="https://henriquezolini.github.io/react-bancos/icons/nubank.svg" width="48" height="48" />

// índice com metadados de todos os ícones (slug, nome, COMPE quando aplicável, cor, url)
https://henriquezolini.github.io/react-bancos/api/bancos.json

A lista de slugs válidos está na tabela do README ou no próprio bancos.json acima.

Uso

import { Nubank, banks, getBankByCompe } from "react-bancos";

// direto
<Nubank size={48} radius={12} />

// a partir do código COMPE que veio da sua API
const dados = getBankByCompe(260); // → { slug: "nubank", name: "Nubank", compe: "260", color: "#820ad1" }

// listar todos
banks.map(({ slug, Icon }) => <Icon key={slug} size={40} radius={8} />)

Em Node / APIs (sem React)

// módulo só de dados — sem React e sem JSX, para backends
import { banksData, getBankByCompe, getBankByName, searchBanks } from "react-bancos/data";

banksData.length;               // lista completa: { slug, name, compe, color }[]
getBankByCompe("77");           // completa os zeros → Banco Inter
getBankByName("itau");          // ignora acentos e caixa → Itaú Unibanco
searchBanks("banco");           // busca livre por nome, slug ou COMPE

Props

Prop	Tipo	Padrão	Descrição
`size`	`number \| string`	48	Largura e altura. Número vira px.
`radius`	`number \| string`	—	border-radius dos cantos (ex.: 8, "50%").
`title`	`string`	nome do banco	Título acessível (<title> + aria-label).

Qualquer outra prop de <svg> (className, onClick, …) é repassada. Metadados via banksData, getBankByCompe, getBankByName, getBankBySlug e searchBanks — também em react-bancos/data.