# Icons React Spectrum offers a set of open source icons that can be imported from . ```tsx import Edit from "@react-spectrum/s2/icons/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 * 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 * 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 * 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 * 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'; ``` ### 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. Requirements 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)`. ### 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. `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. `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';`