Colors

All icons use the currentColor value by default.

Using the color prop

The color of the icons can be adjusted by using the color prop.

import { Trash } from '@zappicon/react'

function App() {
  return <Trash color="#f58855" size={48} />
}

Parent based color

Icons use the currentColor value, which means their color is determined by the computed color of the element and automatically inherits the parent’s text color.

For example, if a parent element’s color is #5b5bef, any Zappicon icon inside it using currentColor will also appear #5b5bef.

import { House } from '@zappicon/react'

function App() {
  return (
    <div style={{ color: '#5b5bef' }}>
      <House variant="regular" />
      Home
    </div>
  )
}