Icon Styles (Variants)

Each icon in the Zappicon library comes in 5 different styles: Light, Regular, Filled, Duotone, and Duotone Line. You can easily switch between them using the variant prop.

StyleVariant valuePreview
Filledvariant='filled'
Regularvariant='regular'
Lightvariant='light'
Duotonevariant='duotone'
Duotone Linevariant='duotone-line'

Usage

import { Heart } from '@zappicon/react'

function App() {
  return (
    <div>
      <Heart variant="light" size={48} />
      <Heart variant="regular" size={48} />
      <Heart variant="filled" size={48} />
      <Heart variant="duotone" size={48} />
      <Heart variant="duotone-line" size={48} />
    </div>
  )
}