whatisgithub

What is react-bancos?

henriquezolini/react-bancos — explained in plain English

Analysis updated 2026-05-18

22TypeScriptAudience · developerComplexity · 1/5LicenseSetup · easy

In one sentence

A React icon library of Brazilian bank and fintech logos with names, codes, and brand colors.

Mindmap

mindmap
  root((react-bancos))
    What it does
      Provides bank icons
      Includes bank metadata
      Matches brand colors
    Tech stack
      TypeScript
      React
      SVG
    Use cases
      Pix payment screens
      Bank account lists
      Institution selectors
    Audience
      Brazilian developers
      Fintech builders
    Access
      React components
      Data only module
      Static SVG URLs

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Show a Brazilian bank's logo and brand color in an account list or bank statement.

USE CASE 2

Look up a bank icon using its numeric COMPE code returned from an API.

USE CASE 3

Build an institution selector dropdown listing every supported Brazilian bank.

USE CASE 4

Serve a bank's icon as a plain image URL for use in emails or mobile apps.

What is it built with?

TypeScriptReactSVG

How does it compare?

henriquezolini/react-bancosaerdelan/housand-domaintoolmatrixaffaan-m/opencode
Stars222222
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-02-09
MaintenanceMaintained
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

react-bancos is a React component library that provides ready made icons for the major banks and fintech companies in Brazil. Any Brazilian app that deals with money, such as a banking dashboard, a Pix payment screen, or a bill display, eventually needs to show which bank an account or payment belongs to, and this package solves that in one place. Every bank gets its own icon component, all following the same visual style: a square badge in the bank's brand color with the official logo centered inside. Using the library is straightforward. You import a specific bank as a component, such as Nubank or Itau, and drop it into your interface, optionally setting its size, corner roundness, and an accessible title. If you only have a bank's numeric code from an API rather than its name, you can look up the matching icon using that code, or by searching on the bank's name, which works even if the search text has different accents or capitalization. For situations where React is not being used at all, such as a backend service or an API, the package includes a separate data only module with no React or JSX involved. It exposes the same lookup functions along with a plain list of every bank's name, numeric code, and brand color, so a server can return consistent bank information without needing any UI framework. The icons are also published as plain SVG files and are even served directly over the internet as static images through the project's GitHub Pages site, which is useful for mobile apps or emails that can only accept an image URL rather than a code component. The library currently covers around forty of Brazil's most common banks and fintechs, including Nubank, Itau, Banco do Brasil, Caixa, Santander, Inter, C6 Bank, and PicPay, with the project welcoming contributions to add any missing institutions. Written in TypeScript and released under the MIT license, this project is aimed at Brazilian developers building financial or payment related interfaces who need accurate, consistent bank branding without designing every icon themselves.

Copy-paste prompts

Prompt 1
Show me how to install react-bancos and render the Nubank and Itau icon components.
Prompt 2
Help me look up a bank icon by its COMPE code using getBankByCompe from react-bancos.
Prompt 3
Explain how to use the react-bancos/data module in a Node backend without React.
Prompt 4
Walk me through building a bank selector list using the banks array from react-bancos.

Frequently asked questions

What is react-bancos?

A React icon library of Brazilian bank and fintech logos with names, codes, and brand colors.

What language is react-bancos written in?

Mainly TypeScript. The stack also includes TypeScript, React, SVG.

What license does react-bancos use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is react-bancos to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is react-bancos for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.