Icon

View Source

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

Icon sets

An “icon set” groups product-specific icon paths together. By default, tapestry-react components have access to the general icon set, which contains icon paths that multiple products share.

Formatting

Prefix the icon set’s name
Use dot notation to specify your icon
Render the icon name in camelCase

// expects: iconSetName.iconName

<Icon name="general.outlinedInfoCircle" />
<Button icon={{ name: "general.outlinedInfoCircle"}} />

Importing additional icon sets

Additional icon sets can be imported from libraries like @planningcenter/icons and exported through your app’s ThemeProvider. (You can import all exports by using an asterisk.)

{/* import icon sets in local theme definition */}
import * as calendar from '@planningcenter/icons/paths/calendar'
import * as giving from '@planningcenter/icons/paths/giving'
import * as people from '@planningcenter/icons/paths/people'

const theme = {
  ...themeOptions,
  icons: {
    calendar,
    giving,
    people,
    ...designSystem.defaultTheme.icons
  },
}

{/* prefix Icon instance in component */}
<Icon name="calendar.reservationBlock" />
<Icon name="giving.clockCircleO" />
<Icon name="people.photoOutline" />

render(() => {
  return (
    <StackView axis="horizontal" spacing={2}>
      <Icon name="calendar.reservationBlock" size="xl" />
      <Icon name="giving.clockCircleO" size="xl" />
      <Icon name="people.photoOutline" size="xl" />
    </StackView>
  )
})

render(() => {
  return (
    <StackView axis="horizontal" spacing={2}>
      <Icon name="calendar.reservationBlock" size="xl" />
      <Icon name="giving.clockCircleO" size="xl" />
      <Icon name="people.photoOutline" size="xl" />
    </StackView>
  )
})

Preview icons

Preview all of the available icon sets and their icon’s names from @planningcenter/icons.

bell

bellMuted

bill

blankFile

blockGrid

bolt

bracketsCurly

brokenLink

calendar

calendarRepeat

celebrate

check

checkCalendar

checkCircle

checkDouble

checklist

checkPerson

clock

closedStar

cog

cogPerson

creditCard

downArrow

downCaret

downChevron

dragHandle

envelope

event

exchange

exclamationCircle

exclamationTriangle

faders

folder

fromCloudArrow

funnel

genericFile

hangTag

heart

hideEye

image

inactive

infoCircle

intoBox

inTray

laptop

leftArrow

leftCaret

leftChevron

link

locationPin

lock

magicWand

megaphone

message

minus

minusCircle

mobilePhone

newWindow

openFolder

openStar

outlinedBell

outlinedBlankFile

outlinedCelebrate

outlinedChecklist

outlinedCircleCheck

outlinedClock

outlinedCreditCard

outlinedDots

outlinedEnvelope

outlinedExclamationCircle

outlinedGenericFile

outlinedHeart

outlinedImageFile

outlinedInfoCircle

outlinedLocationPin

outlinedMessage

outlinedMinusCircle

outlinedMusicFile

outlinedNotes

outlinedOpenEnvelope

outlinedPdfFile

outlinedPlusCircle

outlinedQuestionCircle

outlinedSlashCircle

outlinedStarCircle

outlinedTextFile

outlinedTextMessage

outlinedTwoBlankFiles

outlinedVideoFile

outlinedXCircle

paperclip

pencil

pencilCircle

pencilPerson

person

personBadge

phone

pico

plus

plusCircle

plusPerson

printer

pulse

qrCode

question

questionCircle

refresh

reload

rightArrow

rightCaret

rightChevron

rss

rssSquare

shieldExclamation

showEye

star

starCircle

starSquare

textMessage

textMessageNotifications

thickCheckmark

thickFromBottomArrow

thickToBottomArrow

thickX

threeDots

threeDotsO

threeHorizontalBars

threeHorizontalBarsDownArrow

threeHorizontalListItems

threeLineMusicNote

threeReducingHorizontalBars

threeVerticalBars

toCloudArrow

trash

tray

trendingUp

twoBlankFiles

twoInwardChevrons

twoOutwardChevrons

twoPeople

unlock

upArrow

upCaret

upChevron

videoCamera

viewCardStack

viewTable

xCircle

render(() => {
  const iconSets = Object.keys(icons).filter((icons) => icons !== 'tapestry')
  const [searchValue, setSearchValue] = React.useState('')
  const [selectedIconSet, setSelectedIconSet] = React.useState('general')

  return (
    <StackView grow={1}>
      <StackView axis="horizontal" spacing={2}>
        <Select
          basis={26}
          emptyValue="Choose icon set"
          onChange={(event) => setSelectedIconSet(event.value)}
          defaultValue={selectedIconSet}
        >
          {iconSets.map((icons) => (
            <Select.Option key={icons} value={icons}>
              {icons}
            </Select.Option>
          ))}
        </Select>
        <Input
          grow={1}
          autoFocus
          renderLeft={<Icon name="general.search" />}
          placeholder="Search by icon name"
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
        />
      </StackView>
      <TileView minCellWidth={16} spacing={4} margin={4}>
        {matchSorter(Object.keys(icons[selectedIconSet]), searchValue).map(
          (iconName) => (
            <StackView key={iconName} alignment="center" spacing={1}>
              <Icon
                key={iconName}
                name={`${selectedIconSet}.${iconName}`}
                size="xl"
              />
              <Text fontSize={5} color="foregroundSecondary">
                {iconName}
              </Text>
            </StackView>
          )
        )}
      </TileView>
    </StackView>
  )
})

render(() => {
  const iconSets = Object.keys(icons).filter((icons) => icons !== 'tapestry')
  const [searchValue, setSearchValue] = React.useState('')
  const [selectedIconSet, setSelectedIconSet] = React.useState('general')
  return (
    <StackView grow={1}>
      <StackView axis="horizontal" spacing={2}>
        <Select
          basis={26}
          emptyValue="Choose icon set"
          onChange={(event) => setSelectedIconSet(event.value)}
          defaultValue={selectedIconSet}
        >
          {iconSets.map((icons) => (
            <Select.Option key={icons} value={icons}>
              {icons}
            </Select.Option>
          ))}
        </Select>
        <Input
          grow={1}
          autoFocus
          renderLeft={<Icon name="general.search" />}
          placeholder="Search by icon name"
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
        />
      </StackView>
      <TileView minCellWidth={16} spacing={4} margin={4}>
        {matchSorter(Object.keys(icons[selectedIconSet]), searchValue).map(
          (iconName) => (
            <StackView key={iconName} alignment="center" spacing={1}>
              <Icon
                key={iconName}
                name={`${selectedIconSet}.${iconName}`}
                size="xl"
              />
              <Text fontSize={5} color="foregroundSecondary">
                {iconName}
              </Text>
            </StackView>
          )
        )}
      </TileView>
    </StackView>
  )
})

Props

Accepts Box props.

childrenReactReactNode

Accepts the Icon.Path component if a name is not provided.

colorstring

Pass any valid color from colors. Defaults to currentColor.

namestring

The name of the icon to render.

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

Sizes the container proportionally.

Icon sets
Formatting
Importing additional icon sets
Preview icons
Props

PreviousText NextIcon.Path