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> ) }