Hafra Payment Icons

Malawian bank and mobile money (MoMo) icons for React apps. Each provider has an image variant and an image-and-text variant, with support for customizable colors.

Documentation website: https://hafra161225.github.io/hafra-payment-icons/

Quick start

npm install hafra-payment-icons

import { PaidIcon, PaidIconWithText } from "hafra-payment-icons";

<PaidIcon provider="mpamba" size={40} color="#39A935" />

<PaidIconWithText provider="national-bank" size={36} color="#2E3192" shortLabel />

Providers

Banks

| ID | Name | |---|---| | cdh | CDH Investment Bank | | centenary | Centenary Bank Malawi | | ecobank | Ecobank Malawi | | fdh | FDH Bank | | first-capital | First Capital Bank Malawi | | national-bank | National Bank of Malawi | | nbs | NBS Bank | | standard-bank | Standard Bank Malawi | | mbc | MBC Bank |

Mobile money (MoMo)

| ID | Name | |---|---| | airtel-money | Airtel Money | | mpamba | TNM Mpamba |

Documentation

• Live docs & gallery
• Website source — the static docs app (npm run preview)

Install

npm install hafra-payment-icons

Peer dependency: React 17+

Usage

Image only

import { PaidIcon } from "hafra-payment-icons";

<PaidIcon provider="mpamba" size={40} color="#39A935" />

<div style={{ color: "#e60000" }}>
  <PaidIcon provider="mpamba" size={32} />
</div>

<PaidIcon provider="mpamba" size={48} color="#ffffff" backgroundColor="#39A935" />

Image and text

import { PaidIconWithText } from "hafra-payment-icons";

<PaidIconWithText provider="mpamba" size={36} color="#39A935" textColor="#39A935" />

<PaidIconWithText
  provider="mpamba"
  shortLabel
  textPosition="bottom"
  gap={6}
  color="#1a1a1a"
/>

Color modes

| Mode | Behavior | |---|---| | monochrome | Logo mark filled with color (default) | | original | Raw source PNG as uploaded | | tint | Same as monochrome |

API

PaidIcon

| Prop | Type | Default | Description | |---|---|---|---| | provider | ProviderId | required | Provider slug | | size | number | 32 | Width and height (px) | | color | string | currentColor | Logo mark color | | colorMode | original \| monochrome \| tint | per provider | How color is applied (original for NBS brand colors) | | backgroundColor | string | — | Optional square background | | className | string | — | CSS class | | style | CSSProperties | — | Inline styles |

PaidIconWithText

Extends PaidIcon props plus:

| Prop | Type | Default | Description | |---|---|---|---| | textColor | string | inherits | Label color | | textPosition | right \| bottom | right | Layout | | gap | number | 8 | Space between icon and label (px) | | shortLabel | boolean | false | Use short name (e.g. "NBM") | | label | string | — | Override display name | | fontSize | number | auto | Label font size (px) |

Catalog helpers

import { PROVIDERS, BANK_IDS, MOMO_IDS, getProvider, hasIcon } from "hafra-payment-icons";

getProvider("national-bank");
hasIcon("national-bank");

Development

npm install
npm run process-icons
npm run build
npm run preview       # docs site dev server

License

MIT