react-native-payment-card-icons

A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components, fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.

Table of Contents

- Table of Contents
- Features
- Installation
- Prerequisites
- Usage
- Basic Usage with PaymentIcon Component
- Using Individual Icon Components
- API Reference
- PaymentIcon Props
- Supported Payment Types
- Supported Variants
- Examples
- Visual Showcase
- Live Example App
- Dynamic Payment Form
- Card Grid Display
- Custom Themed Icons
- Platform Support
- Expo Support
- React Native Web Support
- TypeScript Support
- Performance
- Troubleshooting
- Common Issues
- Contributing
- Development
- License
- Acknowledgments

Features

- 🎨 Multiple styles: flat, flatRounded, logo, logoBorder, mono, monoOutline
- 💳 Comprehensive coverage: Supports 17+ payment providers
- 📱 Cross-platform: Works with React Native, Expo, and React Native Web
- 🔧 Fully customizable: Size, color, and styling options
- 🎯 TypeScript support: Complete type definitions included
- 📦 Zero dependencies: Only requires react-native-svg

Installation

``sh
npm install react-native-payment-card-icons


or


yarn add react-native-payment-card-icons
`

$3

This library requires react-native-svg to be installed and configured in your project:

`sh
npm install react-native-svg


or


yarn add react-native-svg
`

For React Native 0.60+, run npx pod-install (iOS only) after installation.

Usage

$3

The easiest way to use the library is with the PaymentIcon component:

`tsx
import React from 'react';
import { View } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

export default function App() {
return (

{/ Basic usage /}


{/ With custom styling /}
type="mastercard"
variant="flatRounded"
width={60}
height={40}
/>

{/ Monochrome style with custom color /}
type="amex"
variant="mono"
width={50}
height={32}
fill="#007bff"
/>

);
}
`

$3

You can also import and use individual icon components directly:

`tsx
import React from 'react';
import { View } from 'react-native';
import {
VisaFlat,
MastercardLogo,
AmexMono
} from 'react-native-payment-card-icons';

export default function App() {
return (





);
}
`

API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | PaymentIconType | required | The payment card brand |
| variant | PaymentIconStyle | 'flat' | The icon style variant |
| width | number \| string | 24 | Icon width |
| height | number \| string | 24 | Icon height |
| fill | string | undefined | Fill color (mainly for mono variants) |

$3

| Type | Description |
|------|-------------|
| 'visa' | Visa |
| 'mastercard' | Mastercard |
| 'amex' | American Express |
| 'maestro' | Maestro |
| 'discover' | Discover |
| 'jcb' | JCB |
| 'diners' | Diners Club |
| 'unionpay' | UnionPay |
| 'elo' | Elo |
| 'hiper' | Hiper |
| 'hipercard' | Hipercard |
| 'mir' | Mir |
| 'alipay' | Alipay |
| 'paypal' | PayPal |
| 'generic-card' | Generic Card |
| 'security-code' | Security Code (CVV) |
| 'security-code-front' | Security Code Front |

$3

| Variant | Description | Best Use Case |
|---------|-------------|---------------|
| 'flat' | Flat design with brand colors | Modern UI, cards display |
| 'flatRounded' | Flat design with rounded corners | Card forms, modern UI |
| 'logo' | Official brand logo | Marketing, branding |
| 'logoBorder' | Logo with border | Professional docs, forms |
| 'mono' | Monochrome filled | Custom branded UI |
| 'monoOutline' | Monochrome outline | Minimalist UI, wireframes |

Examples

$3





The library supports multiple variants for each payment method. Above shows Visa cards in all 6 available styles: flat, flatRounded, logo, logoBorder, mono, and monoOutline.

$3

Expo snack example: https://snack.expo.dev/@lekgwaraj/react-native-payment-card-icons

$3





This example shows how to create a dynamic payment form that automatically detects the card type as the user types:

`tsx
import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

// Simple card type detection (you might want a more robust solution)
const detectCardType = (number: string) => {
if (number.startsWith('4')) return 'visa';
if (number.startsWith('5') || number.startsWith('2')) return 'mastercard';
if (number.startsWith('3')) return 'amex';
return 'generic-card';
};

export default function PaymentForm() {
const [cardNumber, setCardNumber] = useState('');
const cardType = detectCardType(cardNumber);

return (


style={styles.input}
placeholder="Card Number"
value={cardNumber}
onChangeText={setCardNumber}
keyboardType="numeric"
/>
type={cardType}
variant="flat"
width={40}
height={25}
/>


);
}

const styles = StyleSheet.create({
container: {
padding: 20,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 8,
paddingHorizontal: 15,
},
input: {
flex: 1,
height: 50,
fontSize: 16,
},
});
`

$3





Display all supported payment methods in a clean grid layout:

`tsx
import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

const supportedCards = [
{ type: 'visa', name: 'Visa' },
{ type: 'mastercard', name: 'Mastercard' },
{ type: 'amex', name: 'American Express' },
{ type: 'discover', name: 'Discover' },
{ type: 'paypal', name: 'PayPal' },
];

export default function SupportedPayments() {
return (

We Accept
data={supportedCards}
numColumns={3}
renderItem={({ item }) => (

type={item.type}
variant="flatRounded"
width={60}
height={38}
/>
{item.name}

)}
keyExtractor={(item) => item.type}
/>

);
}

const styles = StyleSheet.create({
container: {
padding: 20,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 15,
},
cardItem: {
flex: 1,
alignItems: 'center',
margin: 10,
},
cardName: {
marginTop: 8,
fontSize: 12,
textAlign: 'center',
},
});
`

$3





Create custom themes for your payment icons to match your app's design:

`tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

export default function ThemedIcons() {
return (

{/ Dark theme /}






{/ Brand theme /}






);
}

const styles = StyleSheet.create({
container: {
padding: 20,
},
section: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 20,
marginVertical: 10,
borderRadius: 8,
},
darkTheme: {
backgroundColor: '#333',
},
brandTheme: {
backgroundColor: '#f8f9fa',
borderWidth: 1,
borderColor: '#dee2e6',
},
});
`

Platform Support

$3

This library works seamlessly with Expo. Make sure you have react-native-svg installed:

`sh
expo install react-native-svg
`

$3

The library is fully compatible with React Native Web. No additional configuration required.

$3

The library includes complete TypeScript definitions. All component props and types are exported:

`tsx
import {
PaymentIcon,
PaymentIconType,
PaymentIconStyle,
PaymentIconProps
} from 'react-native-payment-card-icons';

// Type-safe usage
const cardType: PaymentIconType = 'visa';
const variant: PaymentIconStyle = 'flatRounded';
`

Performance

- Optimized SVGs: All icons are optimized for minimal bundle size
- Tree-shakable: Import only the icons you need
- No bitmap images: Crisp at any resolution
- Lightweight: Minimal impact on bundle size

Troubleshooting

$3

Icons not showing:
- Ensure react-native-svg is properly installed and linked
- For React Native 0.60+, run npx pod-install on iOS

TypeScript errors:
- Make sure you're using the correct prop types
- Update to the latest version of the library

Performance on large lists:
- Consider using getItemLayout for FlatList performance
- Use appropriate icon sizes to avoid unnecessary rendering

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

$3

`sh


Clone the repository

git clone https://github.com/julekgwa/react-native-payment-card-icons.git

Install dependencies

yarn install

Run tests

yarn test

Run the example app

yarn example ios

or

yarn example android
``

License

MIT © Junius Lekgwara

Acknowledgments

- Icons based on CC Icons by Aaron Fagan
- Built with create-react-native-library

---