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.

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>