Skip to main content

Icon: React

Icons can be used to provide extra visual context for other items.

OverviewReactSwiftKotlin

Installation​

Before you can start using the @chameleon/react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { Icon } from '@chameleon/react';

export default function Example() {
  return <Icon name="brand" />;
}

Properties​

PropertyTypeDefaultRequiredDescription
refRef<T>-No
nameChameleonIcon-NoIcon name from the sprite sheet (e.g., 'add', 'close', 'menu').
classNameString-NoAllows extending the class names of the Icon component.
colorChameleonCssToken-NoAllows changing the color of the component through the use of a CSS Custom Property. (e.g. 'var(--color-primary-base)')
size'sm' | 'md' | 'lg' | 'xl''md'NoChanges the icon's height and width.
accessibilityLabelString-NoAccessible label for the icon. When provided, the icon is announced as an image with this label. When omitted, the icon is hidden from assistive technology (`aria-hidden="true"`) and surrounding text carries the meaning.

name​

The name property allows you to specify the icon name as a string (kebab-case). Possible icons can be found in the Icons documentation.

(Icons are rendered using an SVG sprite sheet. The sprite sheet URL is resolved automatically from the ChameleonProvider context.)

Custom icons​

When using icons in components that accept an icon as a prop (e.g., Button, TextField), you can pass either a string icon name or a custom function component:

import { Icon, Button } from '@chameleon/react';

// String icon name
<Button iconLeft="arrow-right">Next</Button>;

// Custom icon component
const HeartIcon = (props) => (
  <Icon name="heart" color="var(--color-primary-base)" {...props} />
);
<Button iconLeft={HeartIcon}>Like</Button>;

Important: When creating a custom icon component to pass to another Chameleon component, it must accept props and spread them onto the underlying Icon. Chameleon internally passes props like className and size to ensure the icon renders correctly within the parent component. Omitting the spread will cause layout and styling issues.

// ❌ Wrong — ignores props from parent component
const MyIcon = () => <Icon name="heart" />;
// ✅ Correct — spreads props
const MyIcon = (props) => <Icon name="heart" {...props} />;