Sizing

All icons are 24×24 px by default. The size can be adjusted using the size prop, CSS, or Tailwind CSS.

Adjusting size using the size prop

You can control the icon size by passing a value to the size prop.

import { Star } from '@zappicon/react'

function App() {
  return <Star size={48} />
}

Resizing with CSS

Icons can be resized using the Tailwind CSS utility classes w-{size} and h-{size} or size-{size}.

import { Star } from '@zappicon/react'

function App() {
  return <Star style={{ width: '32px', height: '32px' }} />
}

Resizing with Tailwind CSS

You can resize icons using Tailwind CSS utility classes.

import { Star } from '@zappicon/react'

function App() {
  return <Star className="h-8 w-8" />
}