> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AnimatedIconCrossfade

> Crossfade between two icons as application state changes.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`AnimatedIconCrossfade` displays one of two icon components according to `isActive`. It does not own the action or state. Compose it inside a labeled [Button](/ui/primitives/input/button).

```tsx theme={null}
import { useState } from 'react';
import { AnimatedIconCrossfade } from 'twenty-ui/components';
import { IconPencil, IconX } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';

export const EditToggle = () => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <Button
      onClick={() => setIsEditing(!isEditing)}
      startIcon={
        <AnimatedIconCrossfade
          isActive={isEditing}
          ActiveIcon={IconX}
          InactiveIcon={IconPencil}
        />
      }
    >
      {isEditing ? 'Finish editing' : 'Edit record'}
    </Button>
  );
};
```

`size` defaults to the small theme icon size. Keep the accessible action name on the surrounding control. The icons communicate its state visually.

<StoryEmbed storyId="ui-input-button-button--animated-icon-documentation" title="AnimatedIconCrossfade example" height={280} />

## Props

<ParamField body="ActiveIcon" type="IconComponent" required>
  Icon component for the active state.
</ParamField>

<ParamField body="InactiveIcon" type="IconComponent" required>
  Icon component for the inactive state.
</ParamField>

<ParamField body="isActive" type="boolean" required>
  Shows ActiveIcon when true and InactiveIcon otherwise.
</ParamField>

<ParamField body="size" type="number">
  Icon dimension in pixels. Defaults to the small theme icon size.
</ParamField>