Documentation

Get started with Cardog Icons, a beautiful and consistent icon library for your web and mobile applications. Now with mono/dark variants for dark mode UIs.

✨ What's New in v1.1.0

Mono/Dark variants - Single-color icons perfect for dark mode
🚗New brands: Bugatti, Buick, Koenigsegg, Pagani, Rivian
📦380+ total icons across 51 brands

Quick Start

Install the package with your preferred package manager:

# npm
npm install @cardog-icons/react

# pnpm
pnpm add @cardog-icons/react

# yarn
yarn add @cardog-icons/react

Import and use icons as React components:

import { BMWLogo, BMWLogoDark, AudiIcon } from '@cardog-icons/react';

function MyComponent() {
  return (
    <div>
      {/* Color variant (default) */}
      <BMWLogo size={48} />
      <AudiIcon size={32} />
      
      {/* Mono/Dark variant - great for dark backgrounds */}
      <BMWLogoDark size={48} className="text-white" />
    </div>
  );
}

Icon Variants

Color (Default)

Full-color brand logos. Use these on light backgrounds or when brand colors are important.

BMWLogo, AudiIcon, TeslaWordmark

Mono (Dark)

Single-color icons optimized for dark mode. Inherits currentColor for easy styling.

BMWLogoDark, AudiIconDark, TeslaWordmarkDark

Naming Convention

Icons follow a consistent naming pattern:

Type	Color	Mono
Icon (badge)	`BMWIcon`	`BMWIconDark`
Logo	`BMWLogo`	`BMWLogoDark`
Horizontal Logo	`BMWLogoHorizontal`	`BMWLogoHorizontalDark`
Wordmark	`BMWWordmark`	`BMWWordmarkDark`

Usage with React Native

For React Native applications, install the dedicated package:

# npm
npm install @cardog-icons/react-native react-native-svg

# yarn
yarn add @cardog-icons/react-native react-native-svg

# pnpm
pnpm add @cardog-icons/react-native react-native-svg

Then import and use the icons in your React Native components:

import { BMWLogo, BMWLogoDark, AudiIcon } from '@cardog-icons/react-native';

function MyScreen() {
  return (
    <View style={{ padding: 20 }}>
      {/* Color variant */}
      <BMWLogo width={48} height={48} />
      <AudiIcon width={32} height={32} />
      
      {/* Mono/Dark variant */}
      <BMWLogoDark width={48} height={48} fill="white" />
    </View>
  );
}

Props

All icon components accept standard SVG props:

Prop	Type	Description
`size`	number \| string	Width and height
`width`	number \| string	Override width
`height`	number \| string	Override height
`className`	string	CSS class name
`...svgProps`	SVGProps	Any valid SVG attribute

Browse All Icons