Ícones dos bancos do Brasil para React

Um componente por instituição — fiel à marca, tipado e com metadados: nome, código COMPE e cor. Feito para telas de Pix, extratos e seletores de conta.

bancos · TypeScript · ESM + CJS · React ≥ 17 · MIT

Bancos

Clique em um card para copiar o import do componente.

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.