Icon

View Source

Icons are used to help visually communicate actions and information to the end user.

Single icon sets

Choose icon set

add

add-circle

add-circle-filled

amazon

archive

arrow-down

arrow-up

audio

calendar

calendar-blockout

caret-down

caret-grow

caret-left

caret-right

caret-shrink

caret-up

chat-bubble-outline

checkbox-0

checkbox-1

checkbox-2

checkmark

checkmark-circle

checkmark-circle-filled

clock

close-circle

close-circle-filled

cog

columns

csv-export

download

drag-handle

duplicate

envelope

exclamation-circle

exclamation-circle-filled

exclamation-triangle-filled

external

eye

eye-outline

facebook

file-copy

file-lyrics

file-pdf

file-text

filter

folder-add

folder-closed

folder-open

format-color

format-size

graph

house

image

import-export

inactive

info

itunes

layout

link

link-off

logo-planning-center

notes

pause

pencil

people

person

phone

phone-mobile

pin-circle-filled

placeholder

plan-detail

plan-files

plan-media

plan-notes

plan-song

play

play-circle

play-circle-filled

playlist

praise-charts

question

question-circle

question-circle-filled

radio-0

radio-1

rehearsal-mix

remove

remove-circle

remove-circle-filled

repeat

sequence

settings

shield

skip-next

skip-previous

song-select

split

spotify

star

swap

tag

topbar-search

transpose

trash

twitter

upload

video

vimeo

volume-0

volume-1

volume-2

volume-3

youtube

Copy

Edit

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>
  )
})

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 you can import all exports by using an asterisk:

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

Copy

Edit

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>
  )
})

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>
  )
})

Props

namestring

The name of the icon to render.

size'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string

Sizes the container proportionally.

colorstring

Pass any valid color from colors. Defaults to currentColor.

Single icon sets
Grouped icon sets
Props

PreviousText NextColumnView