Houzz UI

Usage

ContentIcon has three variants: transparent, light and solid. Each variant has color variants according to our color palette and four available sizes.

By default, the circle (dot) icon is displayed. The icon prop can be used to pass an icon name or an Icon component to change the default appearance.

import { ContentIcon } from '@houzz/ui';

<HorizontalStack alignItems="center">
    <ContentIcon icon="heart" />
    <ContentIcon variant="light" colorVariant="teal" icon="calculator" />
    <ContentIcon variant="solid" colorVariant="red" icon={<Icon as={Pdf} title="PDF document" />} />
    <ContentIcon variant="transparent" colorVariant="blue" icon="personUnisex" />
</HorizontalStack>

<HorizontalStack alignItems="center">
    <ContentIcon icon="heart" />
    <ContentIcon variant="light" colorVariant="teal" icon="calculator" />
    <ContentIcon variant="solid" colorVariant="red" icon={<Icon as={Pdf} title="PDF document" />} />
    <ContentIcon variant="transparent" colorVariant="blue" icon="personUnisex" />
</HorizontalStack>

Size

Use the size prop to select from available size variants.

Color

Use the colorVariant to change color combinations.

Props

ContentIcon

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>`	-
`variant`	`"transparent" \| "solid" \| "light"`	Style variant, defaults to 'light'.
`colorVariant`	`"blue" \| "cyan" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "neutral"`	Color variant, defaults to 'neutral'.
`icon`	`ReactNode`	Icon name or component, `circle` (dot) is used by default.

Content IconHealthy

Usage

Size

Color

Props

System Props