# Icon

Icons are used to visually communicate core parts of the product and available
actions. They can act as wayfinding tools to help users more easily understand
where they are in the product, and common interaction patterns that are
available.

```jsx
import { ChevronRightIcon } from '@elemental-ui-alpha/icon/ChevronRightIcon'; // prefer explicit entry point
import { ChevronRightIcon, ... } from '@elemental-ui-alpha/icon'; // only when using **many** icons
```

### All Icons

Find the icon that meets your needs.

```jsx live render
const [match, setMatch] = React.useState('');
const onlyMatches = i =>
  i
    .slice(0, -4) // remove "Icon"; avoid invalid matches
    .toLowerCase()
    .includes(match.toLowerCase());

return (
  <Stack gap="medium">
    <TextField
      label="Search Icons"
      labelVisibility="hidden"
      onChange={e => setMatch(e.target.value)}
      placeholder="Search..."
      type="search"
      value={match}
    />
    <div
      style={{
        display: 'grid',
        gap: 12,
        gridTemplateColumns: 'repeat(auto-fill, minmax(144px, 1fr))',
      }}
    >
      {Object.keys(icons)
        .sort()
        .filter(onlyMatches)
        .map(key => {
          let Icon = icons[key];
          const c = 'center';

          return (
            <Flex align={c} direction="vertical" justify={c} paddingY="large">
              <Icon fill="B400" />
              <Box marginTop="small">{Icon.displayName}</Box>
            </Flex>
          );
        })}
    </div>
  </Stack>
);
```