# Source: https://react-spectrum.adobe.com/icons.md

# Icons

React Spectrum offers a set of open source icons that can be imported from .

```tsx
import Edit from "@react-spectrum/s2/icons/Edit";

<Edit />
```

## Available icons

* 3D
* 3DAsset
* 3DMaterial
* ABC
* Accessibility
* Add
* AddCircle
* AddContent
* AlertDiamond
* AlertTriangle
* AlignBottom
* AlignCenter
* AlignLeft
* AlignMiddle
* AlignRight
* AlignTop
* Animation
* AnimationNo
* App
* Apps
* AppsAll
* Archive
* ArrowHeadTool
* Artboard
* AspectRatio
* Asset
* Attach
* AudioWave
* AutoSelectSubject
* Background
* BadgeVerified
* Bell
* BellRotated
* BetaApp
* Binoculars
* Blur
* Bookmark
* Brand
* Briefcase
* BrightnessContrast
* Brush
* Bug
* Building
* Buildings
* Calendar
* CalendarAdd
* CalendarDay
* CalendarEdit
* CalendarWeek
* CallCenter
* Camera
* CameraProperties
* Cancel
* CCLibrary
* Channel
* ChartBarVert
* ChartPie
* ChartTrend
* Chat
* CheckBox
* Checkmark
* CheckmarkCircle
* ChevronDoubleLeft
* ChevronDoubleRight
* ChevronDown
* ChevronLeft
* ChevronRight
* ChevronUp
* Circle
* Clock
* ClockPending
* Close
* CloseCaptions
* CloseCircle
* Cloud
* CloudStateDisconnected
* CloudStateError
* CloudStateInProgress
* CloudStateOnline
* CloudStatePaused
* CloudStatePending
* CloudStateSlowConnection
* Code
* Collection
* Color
* ColorFill
* ColorHarmony
* Comment
* CommentCheckmark
* CommentHide
* CommentRemove
* CommentShow
* CommentText
* Community
* Compare
* ContextualTaskBar
* Contrast
* Copy
* CornerRadius
* CornerRadiusBottomLeft
* CornerRadiusBottomRight
* CornerRadiusEach
* CornerRadiusTopLeft
* CornerRadiusTopRight
* Crop
* CropRotate
* CursorClick
* Cut
* Data
* DataAdd
* DataRefresh
* DataSettings
* DataUpload
* Delete
* DeviceAll
* DeviceDesktop
* DeviceDesktopMobile
* DeviceLaptop
* DeviceMobile
* DeviceMultiscreen
* DevicePhone
* DeviceTablet
* DirectSelect
* Discover
* DistributeBottomEdge
* DistributeHorizontalCenter
* DistributeLeftEdge
* DistributeRightEdge
* DistributeSpaceHorizontally
* DistributeSpaceVertically
* DistributeTopEdge
* DistributeVerticalCenter
* Download
* Draw
* Duplicate
* Edit
* EditNo
* Education
* EffectBorder
* Effects
* Email
* Emoji
* Enterprise
* Erase
* Export
* ExportTo
* Exposure
* Eyedropper
* Feedback
* File
* FileAdd
* FileConvert
* Files
* FileText
* FileUser
* Filmstrip
* Filter
* Filters
* FindAndReplace
* Flag
* FlipHorizontal
* FlipVertical
* Folder
* FolderAdd
* FolderBreadcrumb
* FolderClock
* FolderMoveTo
* FolderOpen
* FolderSearch
* FontPicker
* FullScreen
* FullScreenExit
* Gift
* GlobeGrid
* Gradient
* GradientHorizontal
* GradientRadial
* GridsAndRulers
* GridTypeDots
* GridTypeLines
* Group
* GroupNo
* Hand
* Heart
* HeartFilled
* HelpCircle
* History
* Home
* Image
* ImageAdd
* ImageBackgroundRemove
* Images
* Import
* InfoCircle
* Interaction
* Invert
* Invite
* Key
* Keyboard
* LassoSelect
* Layers
* Layout
* Leave
* Lightbulb
* Lighten
* Line
* LineHeight
* Link
* LinkVertical
* ListBulleted
* ListMultiSelect
* ListNumbered
* Location
* Lock
* LockOpen
* Logo
* MagicWand
* Market
* Mask
* MaskDisable
* Maximize
* MediaOffline
* Mention
* MenuHamburger
* Microphone
* MicrophoneOff
* Minimize
* More
* Move
* MovieCamera
* MusicNote
* NamingOrder
* New
* Nudge
* OpenIn
* Order
* OrderBottom
* OrderOneDown
* OrderOneUp
* OrderTop
* OrientationLandscape
* OrientationPortrait
* Paste
* Path
* Pattern
* Pause
* PauseCircle
* PenBrush
* People
* PeopleGroup
* Percentage
* PinOff
* PinOn
* Play
* Plugin
* PluginGear
* Polygon3
* Polygon4
* Polygon5
* Polygon6
* Preview
* Print
* Project
* ProjectAddInto
* ProjectCreate
* Promote
* Prompt
* Properties
* Prototyping
* Publish
* PublishNo
* RadioButton
* RectangleHoriz
* Redo
* Refresh
* RemoveCircle
* Rename
* Replace
* ReportAbuse
* Resize
* Revert
* ReviewLink
* Ribbon
* RocketQuickActions
* RotateCCW
* RotateCW
* RotateOrientation
* Ruler
* Saturation
* SaveFloppy
* Search
* Select
* SelectAllItems
* SelectAndMove
* SelectMulti
* SelectNo
* SelectNone
* SelectRectangle
* Send
* Settings
* Shapes
* Share
* ShareAndroid
* ShoppingCart
* Shuffle
* Similar
* Slideshow
* SlowConnectionCircle
* SocialNetwork
* Sort
* SortDown
* SortUp
* SpeedFast
* StampClone
* Star
* StarFilled
* StepBackward
* StepForward
* StickyNote
* StrokeDotted
* StrokeSolid
* StrokeWidth
* Switch
* SwitchVertical
* Table
* Tag
* TagBold
* TagItalic
* TagStrikeThrough
* TagUnderline
* Target
* Temperature
* Template
* Text
* TextAdd
* TextAlignCenter
* TextAlignJustify
* TextAlignJustifyLastCenter
* TextAlignJustifyLastLeft
* TextAlignJustifyLastRight
* TextAlignLeft
* TextAlignRight
* TextBold
* TextCapsAll
* TextCapsSmall
* TextHighlight
* TextIncrease
* TextItalic
* TextNumbers
* TextParagraph
* TextReplaceComment
* TextSize
* TextStrikeThrough
* TextSubscript
* TextSuperscript
* TextUnderline
* TextVariableFontSettings
* ThumbDown
* ThumbUp
* Toggle
* Tools
* TouchOneFingerSwipeLeftRight
* Transcript
* TransformDistort
* TransformGeneric
* TransformPerspective
* TransformSkew
* TransformWarp
* Translate
* Tutorials
* Undo
* UnLink
* UnlinkHoriz
* UnlinkVertical
* Upload
* UploadToCloud
* User
* UserAdd
* UserAvatar
* UserAvatarCursor
* UserEdit
* UserFollowing
* UserGroup
* UserLock
* UserSettings
* UsersLock
* VectorDraw
* Video
* ViewGrid
* ViewGridFluid
* ViewList
* ViewTransparency
* Visibility
* VisibilityOff
* VolumeOff
* VolumeOne
* VolumeTwo
* Wallet
* WebNavBar
* WebPage
* ZoomIn
* ZoomOut

## API

Icons support a more limited set of the style macro through a special macro called `iconStyle`.

### iconStyle

```tsx
import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
import Edit from '@react-spectrum/s2/icons/Edit';

<Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
```

### Icon colors

| Color |
|-------|
| white |
| black |
| accent |
| neutral |
| negative |
| informative |
| positive |
| notice |
| gray |
| red |
| orange |
| yellow |
| chartreuse |
| celery |
| seafoam |
| cyan |
| blue |
| indigo |
| purple |
| fuchsia |
| magenta |
| pink |
| turquoise |
| cinnamon |
| brown |
| silver |

### Icon sizes

| Size | Pixels |
|------|--------|
| XS | 14px |
| S | 16px |
| M | 20px |
| L | 22px |
| XL | 26px |

## Custom icons

To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.

<InlineAlert variant="notice">
  <Heading>Requirements</Heading>
  <Content>To use an SVG as an icon which sizes correctly and uses the correct colors, it must be a square (20x20), with a viewBox of `0 0 20 20`. It must also have a fill with `var(--iconPrimary, #222)`.</Content>
</InlineAlert>

### Parcel

If you are using Parcel, the `@react-spectrum/parcel-transformer-s2-icon` plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:

```bash
npm install @react-spectrum/parcel-transformer-s2-icon --dev
```

Then, add it to your `.parcelrc`:

```tsx
{
  extends: "@parcel/config-default",
  transformers: {
    "icon:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}
```

Now you can import icon SVGs using the `icon:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):

`import Icon from 'icon:./path/to/Icon.svg';`

### Other bundlers

The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a folder of SVG icons into TSX files.

```bash
npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'
```

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from './path/to/destination/Icon';`

### Building icons as a library

You can also build the icons as a separate library for distribution so that multiple projects can share the same icons. Or possibly you simply do not want to output tsx files.
To do this, use the `--isLibrary` flag.

```bash
npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination' --isLibrary
```

This outputs a folder of ES modules and commonjs modules with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from 'library-name/path/to/destination/Icon';`