banklogos

Official logos for banks, microfinance banks, mobile money providers and wallets, looked up by bank code, name or search. One package, one consistent format. Nigeria first, expanding worldwide.

Status: published on npm. Covers 272 of 279 Nigerian bank codes; 192 logos are verified (entity.verified). Every release is built and signed by GitHub Actions with npm provenance.

Install

npm install banklogos

Usage

import { getLogo, searchLogos, listByCountry, listByType } from 'banklogos';

getLogo('gtbank'); // by id
getLogo({ bankCode: '058' }); // by the bank code a transfer API returned (Paystack/NIBSS codes)
getLogo({ name: 'GTB' }); // by name, short name or alias
getLogo({ name: 'Access Bank', country: 'GH' }); // prefer a country
searchLogos('acc', { limit: 5 });
listByCountry('NG'); // includes global brands operating in Nigeria (Visa, Mastercard, ...)
listByType('mobile-money');

Lookups never throw. An unknown id or name returns undefined.

The metadata above holds no image data. Import each logo on its own, so your app only ships the logos it uses:

import gtbank from 'banklogos/img/gtbank'; // URL for <img src>, any format
import gtbankMark from 'banklogos/img/gtbank-mark'; // icon-only mark, when the entity has one
import gtbankSvg from 'banklogos/svg/gtbank'; // raw SVG markup, only for logos shipped as SVG

img/<id> imports the image file itself, so your bundler emits it and gives you its URL, in dev and production builds alike. Tested with Next.js 16 (Turbopack and webpack, server and client components) and Vite; see examples/nextjs and examples/bank-picker. Other bundlers that handle image imports (Parcel, Rollup with an asset plugin) work the same way. In plain Node, require('banklogos/img/<id>') returns the file:// URL of the file inside the installed package. The files are also available directly as banklogos/assets/<id>.<svg|webp> (and <id>-mark.<ext>). Test runners that don't understand image imports (e.g. Jest) need their usual image mock.

React Native / Expo

Use banklogos/native/<id>: an image source for <Image> (PNG or WebP; SVG logos ship as a PNG rendering, since React Native's <Image> can't draw SVG). Metro bundles only the logos you import.

import { Image } from 'react-native';
import gtbank from 'banklogos/native/gtbank';
import kudaMark from 'banklogos/native/kuda-mark';

<Image source={gtbank} style={{ width: 40, height: 40 }} resizeMode="contain" />;

Tested with Expo SDK 57 / React Native 0.86 (Android, iOS and web bundles); see examples/expo-app.

Need a plain HTTPS URL instead (server-rendered HTML, API responses, emails)? logoUrl points at the same file on jsDelivr (or unpkg), pinned to the installed version, so nothing needs hosting:

import { getLogo, logoUrl, logoFile } from 'banklogos';

const bank = getLogo({ bankCode: '058' })!;
logoUrl(bank); // https://cdn.jsdelivr.net/npm/banklogos@<version>/assets/gtbank.svg
logoUrl(bank, { variant: 'mark', cdn: 'unpkg' });
logoFile(bank); // "gtbank.svg": the file name under banklogos/assets/, if you serve the files yourself

Logos are shipped as SVG where the institution publishes a vector logo, and as WebP otherwise (the institution's official PNG or app icon, at most 512px). entity.formats tells you which variants are WebP.

Entity metadata

| Field | Meaning | | ------------------------------ | ----------------------------------------------------------------------------------------------------------- | | id | Stable slug. Never renamed or reused. | | scope | ISO country code (NG) or global | | markets | Countries where the brand operates | | types | bank, microfinance-bank, mobile-money, e-wallet, payment-gateway, card-network, crypto | | variants | logo (always present), mark (optional icon-only version) | | formats | Variants shipped as WebP rather than SVG, e.g. { "logo": "webp" } | | bankCodes | Bank codes used by transfer APIs (Nigeria: Paystack/NIBSS codes like "058") | | verified | true once a maintainer has confirmed the logo is current. Filter on it if you only want reviewed entries. | | source.url, source.license | Where the file came from | | variantSources.mark | Where the mark came from, when that differs from source |

How it's built

See docs/OVERVIEW.md for the problem this solves, how the pipeline works, the stack, and the decisions behind it.

Contributing

See CONTRIBUTING.md for adding logos and for the release process. Each logo lives in logos/<scope>/<id>/ as meta.json plus logo.svg (and optionally mark.svg).

npm install
npm run normalize   # optimize SVGs with SVGO
npm run validate    # schema + SVG checks
npm test
npm run build

Legal

All logos are trademarks of their respective owners. They are included for identification purposes only. Their inclusion does not imply endorsement by, or affiliation with, any owner. Owners can request removal; see TAKEDOWN.md.

The MIT license in LICENSE covers the code in this repository. It does not cover the logos.