lo-icons-cards

Credit card icons library with light and color variants for React.

Installation

npm install lo-icons-cards

Usage

import { 
  VisaColor, 
  VisaLight,
  MastercardColor,
  MastercardLight,
  AmericanExpressColor,
  AmericanExpressLight,
  // ... all icons
} from 'lo-icons-cards';

function App() {
  return (
    <div>
      <VisaColor width={64} height={48} />
      <VisaLight width={64} height={48} />
      <MastercardColor width={64} height={48} />
    </div>
  );
}

Available Icons

| Card | Color | Light | |------|-------|-------| | Visa | VisaColor | VisaLight | | Mastercard | MastercardColor | MastercardLight | | American Express | AmericanExpressColor | AmericanExpressLight | | Discover | DiscoverColor | DiscoverLight | | Cirrus | CirrusColor | CirrusLight | | JCB | JcbColor | JcbLight | | Maestro | MaestroColor | MaestroLight | | PayPal | PaypalColor | PaypalLight |

Props

All icons support the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number \| string | 48 | Width of the icon | | height | number \| string | 32 | Height of the icon | | className | string | - | CSS class name |

TypeScript Usage

The library is fully typed. You can import types if needed:

import { 
  VisaColor, 
  MastercardColor,
  type CardIconProps 
} from 'lo-icons-cards';

function PaymentMethod({ type, variant }: { type: string; variant: 'color' | 'light' }) {
  const icons: Record<string, React.FC<CardIconProps>> = {
    visa: variant === 'color' ? VisaColor : VisaLight,
    mastercard: variant === 'color' ? MastercardColor : MastercardLight,
  };

  const Icon = icons[type];
  return Icon ? <Icon width={64} /> : null;
}

Dynamic Icon Selection

You can select icons dynamically by card type:

import * as Icons from 'lo-icons-cards';

const cardIconMap = {
  visa: Icons.VisaColor,
  mastercard: Icons.MastercardColor,
  amex: Icons.AmericanExpressColor,
  discover: Icons.DiscoverColor,
  cirrus: Icons.CirrusColor,
  jcb: Icons.JcbColor,
  maestro: Icons.MaestroColor,
  paypal: Icons.PaypalColor,
} as const;

type CardType = keyof typeof cardIconMap;

function CardIcon({ type, variant = 'color' }: { type: CardType; variant?: 'color' | 'light' }) {
  const iconKey = `${type}${variant === 'light' ? 'Light' : 'Color'}` as keyof typeof Icons;
  const Icon = Icons[iconKey];
  return Icon ? <Icon width={64} height={48} /> : null;
}

// Usage
<CardIcon type="visa" variant="light" />
<CardIcon type="mastercard" variant="color" />

Styling Examples

Custom Size

<VisaColor width={96} height={64} />
<VisaColor width="100%" height={48} />

With CSS Class

<VisaColor className="payment-icon" />

// CSS
.payment-icon {
  margin: 0 8px;
}

Grid Layout

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
  <VisaColor />
  <MastercardColor />
  <AmericanExpressColor />
  <DiscoverColor />
</div>

FAQ

Q: Are these icons free for commercial use? A: Yes, this library is MIT licensed. You can use it in personal and commercial projects.

Q: Can I use this library in non-React projects? A: This library is designed for React. For vanilla JS/HTML projects, you can directly use the SVG files from the color/ and light/ folders in this repository.

Q: How do I get the raw SVG? A: The source SVG files are available in the color/ and light/ folders in this GitHub repository.

Q: Why are there two variants (color/light)? A: The color variant shows the card brand's official colors on a white background. The light variant uses a light gray background (#DFE3E8), useful for dark themes or when you need a subtle appearance.

Q: Are these icons accessible? A: For production use, consider adding aria-label or wrapping icons in accessible elements. The SVG elements include role="img" when used properly.

Notes

• All icons are 48x32 by default (standard credit card ratio)
• Icons scale proportionally when only width or height is specified
• The library has zero runtime dependencies (only React as peer dependency)
• Tree-shakeable: import only the icons you need
• Compatible with React 16.8+ (requires hooks support)

License

MIT License - feel free to use in personal and commercial projects.