---
title: Icon
category: Primitives
summary: Icons are used to help visually communicate actions and information to the end user.
order: 3
---

## Single icon sets

```jsx live
render(() => {
  const [value, setValue] = React.useState('')
  const [appName, setAppName] = React.useState(undefined)
  const defaultIcons = designSystem.useThemeValue('icons')
  const iconsToRender = appName ? icons[appName] : defaultIcons
  return (
    <StackView grow={1}>
      <StackView axis="horizontal" spacing={2}>
        <Select
          basis={26}
          emptyValue="Choose icon set"
          onChange={(event) => setAppName(event.value)}
        >
          {appNames.map((appName) => (
            <Select.Option key={appName} value={appName}>
              {appName}
            </Select.Option>
          ))}
        </Select>
        <Input
          grow={1}
          autoFocus
          renderLeft={<Icon name="search" />}
          placeholder="Search by icon name"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </StackView>
      <ThemeProvider theme={{ icons: iconsToRender }}>
        <TileView minCellWidth={16} margin={4} spacing={4}>
          {matchSorter(Object.keys(iconsToRender), value).map((iconName) => (
            <StackView key={iconName} alignment="center" spacing={1}>
              <Icon key={iconName} name={iconName} size="xl" />
              <Text fontSize={5} color="foregroundSecondary">
                {iconName}
              </Text>
            </StackView>
          ))}
        </TileView>
      </ThemeProvider>
    </StackView>
  )
})
```

## Grouped icon sets

When using grouped icon sets, you can access deeper path data using dot notation.

To import multiple icons from a library like [@planningcenter/icons](https://github.com/planningcenter/icons) you can [import all exports by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents):

`import * as calendar from '@planningcenter/icons/paths/calendar'`
`import * as general from '@planningcenter/icons/paths/general'`

```jsx live
render(() => {
  return (
    <ThemeProvider theme={{ icons }}>
      <StackView axis="horizontal" spacing={2}>
        <Icon name="accounts.integrations" size="xl" />
        <Icon name="calendar.kiosk" size="xl" />
        <Icon name="general.heart" size="xl" />
        <Icon name="registrations.bell" size="xl" />
      </StackView>
    </ThemeProvider>
  )
})
```