Todo produto brasileiro que lida com dinheiro esbarra no mesmo problema: mostrar de qual banco, cartão ou carteira é aquela conta, chave Pix, boleto ou compra. Este pacote resolve isso de uma vez — um componente por instituição ou marca, todos no mesmo padrão visual (quadrado, fundo na cor da marca, logo oficial centralizado com área de respiro consistente), prontos para listas de contas, extratos, seletores de instituição, checkouts e telas de Pix.

Instalação

npm install react-bancos
# ou: pnpm add react-bancos / yarn add react-bancos

Uso

import { Nubank, Itau, BancoDoBrasil } from "react-bancos";

<Nubank />                          // 48px, cantos retos
<Itau size={32} radius={8} />       // 32px, cantos arredondados
<BancoDoBrasil size="3rem" title="Conta corrente BB" />

Veio só o código do banco da sua API? Busque pelo COMPE, nome ou slug e renderize o ícone:

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

getBankByCompe(260);   // aceita 260, "260" ou "77" (completa os zeros)
getBankByName("itau"); // ignora acentos/caixa → { slug: "itau", name: "Itaú Unibanco", ... }

const banco = banks.find((b) => b.compe === "260");
{banco && <banco.Icon size={24} radius={6} title={banco.name} />}

getBank(slug | compe) continua existindo, mas está deprecated — prefira as buscas específicas acima (que também existem em react-bancos/data, sem React).

Listar todos (ex.: seletor de instituição):

import { banks } from "react-bancos";

{banks.map(({ slug, name, Icon }) => (
  <button key={slug}>
    <Icon size={40} radius={10} /> {name}
  </button>
))}

Props

Todos os componentes aceitam qualquer prop de <svg> (className, onClick, …) e mais:

| 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 da instituição/marca | Título acessível (<title> + aria-label). |

Em Node, APIs e backends (sem React)

Precisa só dos dados — lista completa, nome, código COMPE, cor — num backend? Importe de react-bancos/data: é um módulo puro, sem React e sem JSX, que funciona em qualquer ambiente Node (ESM e CommonJS):

import {
  banksData,        // lista completa: { slug, name, compe, color }[]
  getBankByCompe,   // busca pelo código Bacen: getBankByCompe(341) / "341" / "77"
  getBankByName,    // ignora acentos/caixa: "itau" → Itaú Unibanco
  getBankBySlug,    // slug exato: "nubank"
  searchBanks,      // busca livre por nome, slug ou COMPE → array
} from "react-bancos/data";

getBankByCompe(341);           // → { slug: "itau", name: "Itaú Unibanco", compe: "341", color: "#fe6100" }
getBankByName("mercado pago"); // → { slug: "mercadopago", ... }
searchBanks("banco");          // → todas as instituições com "banco" no nome

As mesmas funções também são exportadas pelo pacote principal (react-bancos), para quem já está no front. getBank(slug | compe) continua existindo, mas está deprecated em favor das buscas específicas.

SVGs puros

Não usa React? Os arquivos originais vêm no pacote:

import nubankUrl from "react-bancos/icons/nubank.svg";

Via URL (sem instalar nada)

Todo ícone também é servido como SVG estático direto pelo GitHub Pages do projeto, endereçado pelo slug do banco — útil pra apps mobile, e-mails, ou qualquer lugar que só aceite uma URL de imagem:

https://henriquezolini.github.io/react-bancos/icons/<slug>.svg

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

Um índice com os metadados de todas as instituições (slug, nome, COMPE, cor e a URL de cada ícone) fica em:

https://henriquezolini.github.io/react-bancos/api/bancos.json

Os slugs válidos são os da coluna Slug da tabela abaixo.

Bancos, cartões e carteiras

Cobertura atual dos principais bancos, fintechs, cartões, carteiras digitais e bandeiras de pagamento do país (e de algumas marcas internacionais usadas por aqui) — contribuições para os que faltam são muito bem-vindas!

| Banco / marca | Slug | COMPE | Ícone | Componente | | --- | --- | :-: | :-: | --- | | Banco do Brasil | bancodobrasil | 001 | ✅ | <BancoDoBrasil /> | | Ourocard Visa Infinite | bancodobrasilinfinite | — | ✅ | <BancoDoBrasilInfinite /> | | Bradesco | bradesco | 237 | ✅ | <Bradesco /> | | Bradesco Visa Infinite | bradescoinfinite | — | ✅ | <BradescoInfinite /> | | Caixa Econômica Federal | caixa | 104 | ✅ | <Caixa /> | | Itaú Unibanco | itau | 341 | ✅ | <Itau /> | | Itaú Black | itaublack | — | ✅ | <ItauBlack /> | | Itaú Personnalité | itaupersonnalite | — | ✅ | <ItauPersonnalite /> | | Itaú Personnalité The One | itautheone | — | ✅ | <ItauTheOne /> | | Itaú Uniclass | itauuniclass | — | ✅ | <ItauUniclass /> | | Santander | santander | 033 | ✅ | <Santander /> | | Santander Elite | santanderelite | — | ✅ | <SantanderElite /> | | Santander Unique | santanderunique | — | ✅ | <SantanderUnique /> | | Nubank | nubank | 260 | ✅ | <Nubank /> | | Nubank Croma | nubankcroma | — | ✅ | <NubankCroma /> | | Nubank Ultravioleta | nubankultravioleta | — | ✅ | <NubankUltravioleta /> | | Banco Inter | inter | 077 | ✅ | <Inter /> | | C6 Bank | c6bank | 336 | ✅ | <C6Bank /> | | C6 Carbon | c6carbon | — | ✅ | <C6Carbon /> | | BTG Pactual | btgpactual | 208 | ✅ | <BTGPactual /> | | BTG Pactual Ultrablue | btgultrablue | — | ✅ | <BTGUltrablue /> | | XP | xp | 348 | ✅ | <XP /> | | Sicoob | sicoob | 756 | ✅ | <Sicoob /> | | Sicoob Verth | sicoobverth | — | ✅ | <SicoobVerth /> | | Sicredi | sicredi | 748 | ✅ | <Sicredi /> | | Sicredi Visa Infinite | sicrediinfinite | — | ✅ | <SicrediInfinite /> | | Banrisul | banrisul | 041 | ✅ | <Banrisul /> | | Banrisul Visa Infinite | banrisulinfinite | — | ✅ | <BanrisulInfinite /> | | Banco Safra | safra | 422 | ✅ | <Safra /> | | Safra Visa Infinite Metal Iridium | safrainfiniteiridium | — | ✅ | <SafraInfiniteIridium /> | | Banco BV | bv | 655 | ✅ | <BV /> | | Banco Pan | pan | 623 | ✅ | <Pan /> | | Banco BMG | bmg | 318 | ✅ | <BMG /> | | Banco Original | original | 212 | ✅ | <Original /> | | Banco Original Black | originalblack | — | ✅ | <OriginalBlack /> | | Banco Original Gold | originalgold | — | ✅ | <OriginalGold /> | | Banco Original International | originalinternational | — | ✅ | <OriginalInternational /> | | Banco Original Platinum | originalplatinum | — | ✅ | <OriginalPlatinum /> | | Neon | neon | 735 | ✅ | <Neon /> | | Cora | cora | 403 | ✅ | <Cora /> | | Mercado Pago | mercadopago | 323 | ✅ | <MercadoPago /> | | PicPay | picpay | 380 | ✅ | <PicPay /> | | PicPay Black | picpayblack | — | ✅ | <PicPayBlack /> | | PagBank | pagbank | 290 | ✅ | <PagBank /> | | Stone | stone | 197 | ✅ | <Stone /> | | Banco Daycoval | daycoval | 707 | ✅ | <Daycoval /> | | BRB — Banco de Brasília | brb | 070 | ✅ | <BRB /> | | Banco do Nordeste | bancodonordeste | 004 | ✅ | <BancoDoNordeste /> | | Banco da Amazônia | bancodaamazonia | 003 | ✅ | <BancoDaAmazonia /> | | Banestes | banestes | 021 | ✅ | <Banestes /> | | Banco Mercantil | mercantil | 389 | ✅ | <Mercantil /> | | Agibank | agibank | 121 | ✅ | <Agibank /> | | Will Bank | willbank | — | ✅ | <WillBank /> | | Banco Sofisa | sofisa | 637 | ✅ | <Sofisa /> | | Banco ABC Brasil | abcbrasil | 246 | ✅ | <ABCBrasil /> | | Citibank Brasil | citibank | 745 | ✅ | <Citibank /> | | Banco Arbi | arbi | 213 | ✅ | <Arbi /> | | Banese | banese | 047 | ✅ | <Banese /> | | Banco BNP Paribas Brasil | bnpparibas | 752 | ✅ | <BNPParibas /> | | Banco BS2 | bs2 | 218 | ✅ | <BS2 /> | | Cresol | cresol | 133 | ✅ | <Cresol /> | | Deutsche Bank Brasil | deutsche | 487 | ✅ | <DeutscheBank /> | | Digio | digio | 335 | ✅ | <Digio /> | | Banco Fibra | fibra | 224 | ✅ | <Fibra /> | | Banco Honda | honda | — | ✅ | <BancoHonda /> | | Banco Inbursa | inbursa | 012 | ✅ | <Inbursa /> | | Banco Industrial do Brasil | industrialdobrasil | 604 | ✅ | <IndustrialDoBrasil /> | | LetsBank | letsbank | 630 | ✅ | <LetsBank /> | | Banco Mizuho do Brasil | mizuho | 370 | ✅ | <Mizuho /> | | Banco Morgan Stanley | morganstanley | 066 | ✅ | <MorganStanley /> | | Banco MUFG Brasil | mufg | 456 | ✅ | <MUFG /> | | Omni Banco | omni | 613 | ✅ | <Omni /> | | Banco Paulista | paulista | 611 | ✅ | <Paulista /> | | Banco Pine | pine | 643 | ✅ | <Pine /> | | Banco Rendimento | rendimento | 633 | ✅ | <Rendimento /> | | Banco Société Générale Brasil | socgen | 366 | ✅ | <SocieteGenerale /> | | Banco Stellantis | stellantis | — | ✅ | <BancoStellantis /> | | Banco Sumitomo Mitsui Brasileiro | sumitomo | 464 | ✅ | <SumitomoMitsui /> | | Banco Topázio | topazio | 082 | ✅ | <Topazio /> | | Banco Toyota | toyota | 387 | ✅ | <BancoToyota /> | | Unicred | unicred | 136 | ✅ | <Unicred /> | | Banco Volkswagen | volkswagen | 393 | ✅ | <BancoVolkswagen /> | | Efí Bank | efibank | 364 | ✅ | <EfiBank /> | | Stark Bank | starkbank | — | ✅ | <StarkBank /> | | Zro Bank | zrobank | — | ✅ | <ZroBank /> | | Revolut | revolut | — | ✅ | <Revolut /> | | Next | next | — | ✅ | <Next /> | | Banco Digimais | digimais | 654 | ✅ | <Digimais /> | | Banco Rabobank | rabobank | 747 | ✅ | <Rabobank /> | | Banco Ourinvest | ourinvest | 712 | ✅ | <Ourinvest /> | | PayPal | paypal | — | ✅ | <PayPal /> | | Wise | wise | — | ✅ | <Wise /> | | Skrill | skrill | — | ✅ | <Skrill /> | | RecargaPay | recargapay | — | ✅ | <RecargaPay /> | | NG.CASH | ngcash | — | ✅ | <NGCash /> | | Asaas | asaas | 461 | ✅ | <Asaas /> | | Celcoin | celcoin | 509 | ✅ | <Celcoin /> | | QI Tech | qitech | 329 | ✅ | <QITech /> | | Bankly | bankly | 332 | ✅ | <Bankly /> | | iugu | iugu | 401 | ✅ | <Iugu /> | | CloudWalk | cloudwalk | 542 | ✅ | <CloudWalk /> | | InfinitePay | infinitepay | — | ✅ | <InfinitePay /> | | Pagar.me | pagarme | — | ✅ | <PagarMe /> | | Creditas | creditas | 342 | ✅ | <Creditas /> | | Warren Investimentos | warren | 371 | ✅ | <Warren /> | | Toro Investimentos | toro | 352 | ✅ | <Toro /> | | Pluggy | pluggy | — | ✅ | <Pluggy /> | | Klavi | klavi | — | ✅ | <Klavi /> | | Ailos | ailos | 085 | ✅ | <Ailos /> | | Almah Conta | almah | — | ✅ | <Almah /> | | ARTTA | artta | — | ✅ | <Artta /> | | Avenue | avenue | — | ✅ | <Avenue /> | | Bank of America Merrill Lynch | bankofamerica | 755 | ✅ | <BankOfAmerica /> | | Banpará | banpara | 037 | ✅ | <Banpara /> | | BEES Bank | beesbank | — | ✅ | <BeesBank /> | | BK Bank | bkbank | — | ✅ | <BKBank /> | | BMP Money Plus | bmp | 274 | ✅ | <BMP /> | | Capitual | capitual | — | ✅ | <Capitual /> | | Conta Simples | contasimples | — | ✅ | <ContaSimples /> | | Contbank | contbank | — | ✅ | <Contbank /> | | CrediSIS | credisis | 097 | ✅ | <CrediSIS /> | | Dock | dock | — | ✅ | <Dock /> | | Grafeno | grafeno | — | ✅ | <Grafeno /> | | iFood Pago | ifoodpago | — | ✅ | <IfoodPago /> | | Linker | linker | — | ✅ | <Linker /> | | MagaluPay | magalupay | 396 | ✅ | <MagaluPay /> | | Modobank | modobank | — | ✅ | <Modobank /> | | Múltiplo Bank | multiplobank | — | ✅ | <MultiploBank /> | | Nomad | nomad | — | ✅ | <Nomad /> | | Omie.Cash | omiecash | — | ✅ | <OmieCash /> | | OrionPay | orionpay | — | ✅ | <OrionPay /> | | PayCash | paycash | — | ✅ | <PayCash /> | | PinBank | pinbank | — | ✅ | <PinBank /> | | Quality Digital Bank | qualitybank | — | ✅ | <QualityDigitalBank /> | | Rico | rico | — | ✅ | <Rico /> | | Sisprime do Brasil | sisprime | 084 | ✅ | <Sisprime /> | | Squid | squid | — | ✅ | <Squid /> | | Stripe | stripe | — | ✅ | <Stripe /> | | Sulcredi | sulcredi | — | ✅ | <Sulcredi /> | | Ton | ton | — | ✅ | <Ton /> | | Transfeera | transfeera | — | ✅ | <Transfeera /> | | Tribanco | tribanco | 634 | ✅ | <Tribanco /> | | Uniprime | uniprime | 099 | ✅ | <Uniprime /> | | UzziPay | uzzipay | — | ✅ | <UzziPay /> | | Zemo Bank | zemobank | — | ✅ | <ZemoBank /> | | Outros | outros | — | ✅ | <Outros /> | | Cartão Americanas | americanas | — | ✅ | <Americanas /> | | American Express | amex | — | ✅ | <AmericanExpress /> | | Cartão Casas Bahia | casasbahia | — | ✅ | <CasasBahia /> | | Cartão C&A | cea | — | ✅ | <CeA /> | | Cartão Havan | havan | — | ✅ | <Havan /> | | Cartão Marisa | marisa | — | ✅ | <Marisa /> | | Cartão Ponto | ponto | — | ✅ | <Ponto /> | | Porto | porto | — | ✅ | <Porto /> | | Porto Bank Black | portoblack | — | ✅ | <PortoBlack /> | | Porto Bank Infinite | portoinfinite | — | ✅ | <PortoInfinite /> | | Cartão Renner | renner | — | ✅ | <Renner /> | | Cartão Riachuelo | riachuelo | — | ✅ | <Riachuelo /> | | Caju | caju | — | ✅ | <Caju /> | | Flash Benefícios | flash | — | ✅ | <Flash /> | | iFood Benefícios | ifood | — | ✅ | <IFood /> | | Pluxee | pluxee | — | ✅ | <Pluxee /> | | Alelo | alelo | — | ✅ | <Alelo /> | | Cartão Colombo | colombo | — | ✅ | <Colombo /> | | Cartão Leader | leader | — | ✅ | <Leader /> | | Cartão Pernambucanas | pernambucanas | — | ✅ | <Pernambucanas /> | | Cartão Quero-Quero | queroquero | — | ✅ | <QueroQuero /> | | Cartão Zema | zema | — | ✅ | <Zema /> | | VR Benefícios | vrbeneficios | — | ✅ | <VRBeneficios /> | | Swile | swile | — | ✅ | <Swile /> | | Cartão Carrefour | carrefour | — | ✅ | <Carrefour /> | | Cartão Samsung | samsung | — | ✅ | <Samsung /> | | Cartão Amazon | amazon | — | ✅ | <Amazon /> | | Cartão Amazon Prime | amazonprime | — | ✅ | <AmazonPrime /> | | Cartão KaBuM! | kabum | — | ✅ | <Kabum /> | | Cartão Méliuz | meliuz | — | ✅ | <Meliuz /> | | Cartão Livelo | livelo | — | ✅ | <Livelo /> | | Cartão Azul | azul | — | ✅ | <Azul /> | | Cartão LATAM Pass | latampass | — | ✅ | <LatamPass /> | | Cartão Decolar | decolar | — | ✅ | <Decolar /> | | 99Pay | 99pay | — | ✅ | <NinetyNinePay /> | | Apple Pay | applepay | — | ✅ | <ApplePay /> | | Google Pay | googlepay | — | ✅ | <GooglePay /> | | Banco Bari | bari | — | ✅ | <Bari /> | | C6 Global | c6global | — | ✅ | <C6Global /> | | Inter Global | interglobal | — | ✅ | <InterGlobal /> | | XP Global | xpglobal | — | ✅ | <XPGlobal /> | | Visa | visa | — | ✅ | <Visa /> | | Mastercard | mastercard | — | ✅ | <Mastercard /> | | Diners Club | dinersclub | — | ✅ | <DinersClub /> | | Discover | discover | — | ✅ | <Discover /> | | Maestro | maestro | — | ✅ | <Maestro /> | | UnionPay | unionpay | — | ✅ | <UnionPay /> | | JCB | jcb | — | ✅ | <JCB /> | | Hipercard | hipercard | — | ✅ | <Hipercard /> | | Visa Electron | visaelectron | — | ✅ | <VisaElectron /> | | Adyen | adyen | — | ✅ | <Adyen /> | | Square | square | — | ✅ | <Square /> | | Payoneer | payoneer | — | ✅ | <Payoneer /> | | N26 | n26 | — | ✅ | <N26 /> | | Cash App | cashapp | — | ✅ | <CashApp /> | | Venmo | venmo | — | ✅ | <Venmo /> | | Zelle | zelle | — | ✅ | <Zelle /> | | Klarna | klarna | — | ✅ | <Klarna /> | | Binance | binance | — | ✅ | <Binance /> | | Coinbase | coinbase | — | ✅ | <Coinbase /> | | OKX | okx | — | ✅ | <OKX /> | | Robinhood | robinhood | — | ✅ | <Robinhood /> | | Brex | brex | — | ✅ | <Brex /> | | Ripio | ripio | — | ✅ | <Ripio /> | | Bybit | bybit | — | ✅ | <Bybit /> | | Bitget | bitget | — | ✅ | <Bitget /> | | Bitso | bitso | — | ✅ | <Bitso /> | | Mercado Bitcoin | mercadobitcoin | — | ✅ | <MercadoBitcoin /> | | Crypto.com | cryptocom | — | ✅ | <CryptoCom /> | | SumUp | sumup | — | ✅ | <SumUp /> | | Neteller | neteller | — | ✅ | <Neteller /> | | Edenred | edenred | — | ✅ | <Edenred /> | | Ticket | ticket | — | ✅ | <Ticket /> | | Charles Schwab | schwab | — | ✅ | <CharlesSchwab /> | | Fidelity | fidelity | — | ✅ | <Fidelity /> | | Banco Master | bancomaster | 243 | ✅ | <BancoMaster /> | | Qive | qive | — | ✅ | <Qive /> | | Conta Azul | contaazul | — | ✅ | <ContaAzul /> | | Onfly | onfly | — | ✅ | <Onfly /> | | Cartão Atacadão | atacadao | — | ✅ | <Atacadao /> | | Cartão RappiCard | rappicard | — | ✅ | <RappiCard /> | | Cartão Polishop | polishop | — | ✅ | <Polishop /> | | Contabilizei Bank | — | — | 🔜 | — | | AstroPay | — | — | 🔜 | — | | Ame Digital | — | — | 🔜 | — | | Superdigital | — | — | 🔜 | — | | Banco Modal | — | 746 | 🔜 | — | | Banco Alfa | — | 025 | 🔜 | — | | Crefisa | — | 069 | 🔜 | — | | Banco Fator | — | 265 | 🔜 | — | | Banco BOCOM BBM | — | 107 | 🔜 | — | | Banco Carrefour | — | 368 | 🔜 | — | | Banco GM | — | 390 | 🔜 | — | | Banco Mercedes-Benz | — | 381 | 🔜 | — | | Banco John Deere | — | — | 🔜 | — | | Banco CNH Industrial | — | — | 🔜 | — | | Banco J. Safra | — | 074 | 🔜 | — | | Banco Crédit Agricole Brasil | — | 222 | 🔜 | — | | Banco KEB Hana do Brasil | — | 757 | 🔜 | — | | Banco Genial | — | 125 | 🔜 | — | | Banco Andbank | — | 065 | 🔜 | — | | Banco Voiter | — | 653 | 🔜 | — | | Banco Tricury | — | 018 | 🔜 | — | | Banco Guanabara | — | 612 | 🔜 | — | | Banco Luso Brasileiro | — | 600 | 🔜 | — | | Banco Semear | — | 743 | 🔜 | — | | Banco CCB Brasil | — | 320 | 🔜 | — | | Banco Bexs | — | — | 🔜 | — | | Travelex Bank | — | 095 | 🔜 | — | | Banco Ribeirão Preto | — | 741 | 🔜 | — | | BDMG | — | — | 🔜 | — | | BRDE | — | — | 🔜 | — | | Banco BNI | — | — | 🔜 | — |

Sentiu falta de um banco, cartão ou carteira? Abra uma issue ou envie um PR — o processo de criação está documentado em CONTRIBUTING.md.

Exemplos ao vivo

henriquezolini.github.io/react-bancos — playground com busca por nome/código, controles de tamanho e raio, e cópia do import com um clique. (Fonte em docs/index.html.)

Para regenerar a página: npm run docs.

Padrão visual

Todos os ícones seguem o mesmo padrão, o que faz listas e grades ficarem visualmente uniformes:

• Canvas quadrado (viewBox 100×100), fundo chapado na cor primária oficial da marca;
• Símbolo oficial da marca centralizado — logo completa somente quando a marca não tem símbolo próprio;
• Área de respiro padronizada (símbolos ocupam 58/100 do canvas; logos completas, 80/100 de largura);
• Vetores extraídos de fontes oficiais, nunca redesenhados à mão.

Contribuindo

npm install
npm run generate   # regenera os componentes a partir de icons/*.svg
npm run docs       # regenera docs/index.html
npm test           # build + smoke test (SSR de todos os ícones)

O guia completo para criar um novo ícone fiel à marca está em CONTRIBUTING.md.

Autor

Aviso legal

Os logos e nomes são marcas registradas de seus respectivos titulares, incluídos aqui exclusivamente para fins de identificação das instituições e marcas. Este projeto não é afiliado, endossado ou patrocinado por nenhuma das marcas listadas. O código do pacote é MIT.