Icon

Rock UI provides multiple ways to use icons in your project:

🚨 Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead.

Using the official icons library#

Chakra maintains an official library of icons for you to use in your project!

Installation#

Usage#

Import the icons from @chakra-ui/icons and style them with style props.

All Icons#

Below is a list of all of the icons in the library, along with the corresponding component names:

<AddIcon/>

<ArrowBackIcon/>

<ArrowDownIcon/>

<ArrowForwardIcon/>

<ArrowLeftIcon/>

<ArrowRightIcon/>

<ArrowUpIcon/>

<ArrowUpDownIcon/>

<AtSignIcon/>

<AttachmentIcon/>

<BellIcon/>

<CalendarIcon/>

<ChatIcon/>

<CheckIcon/>

<CheckCircleIcon/>

<ChevronDownIcon/>

<ChevronLeftIcon/>

<ChevronRightIcon/>

<ChevronUpIcon/>

<CloseIcon/>

<CopyIcon/>

<DeleteIcon/>

<DownloadIcon/>

<DragHandleIcon/>

<EditIcon/>

<EmailIcon/>

<ExternalLinkIcon/>

<HamburgerIcon/>

<InfoIcon/>

<InfoOutlineIcon/>

<LinkIcon/>

<LockIcon/>

<MinusIcon/>

<MoonIcon/>

<NotAllowedIcon/>

<PhoneIcon/>

<PlusSquareIcon/>

<QuestionIcon/>

<QuestionOutlineIcon/>

<RepeatIcon/>

<RepeatClockIcon/>

<SearchIcon/>

<Search2Icon/>

<SettingsIcon/>

<SmallAddIcon/>

<SmallCloseIcon/>

<SpinnerIcon/>

<StarIcon/>

<SunIcon/>

<TimeIcon/>

<TriangleDownIcon/>

<TriangleUpIcon/>

<UnlockIcon/>

<UpDownIcon/>

<ViewIcon/>

<ViewOffIcon/>

<WarningIcon/>

<WarningTwoIcon/>

Using a third-party icon library#

Rock UI makes it easy to use third-party icon libraries like react-icons.

Import#

Usage#

Wrap your third-party icon of choice with the Icon component using the as prop and style them using style props.

Editable Example

Creating your own icons#

Rock UI provides two methods for creating your own icons:

They can be imported from @rockr/rock-ui:

Both Icon and createIcon enable you to style the icon using style props.

Creating icons using the Icon component#

The Icon component renders as an svg element.

Editable Example

This enables you to define your own custom icon components:

And style them with style props:

Editable Example

Creating icons using the createIcon function#

The createIcon function is a convenience wrapper around the process of generating icons with Icon, allowing you to achieve the same functionality with less effort.

Tips for generating your own icons#

  • Export icons as svg from Figma, Sketch, etc.
  • Use a tool like SvgOmg to reduce the size and minify the markup.

Fallback Icon#

When children is not provided, the Icon component renders a fallback icon.

Editable Example

Props#

Icon props#

NameTypeDefaultDescription
viewBoxstring0 0 24 24The viewBox of the icon.
boxSizestring1emThe size of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interative element, and only used for presentation.
rolepresentation, imgpresentationThe html role of the icon.
childrenReact.ReactNodeThe Path or Group of the icon

createIcon options#

NameTypeDefaultDescription
viewBoxstring0 0 24 24The viewBox of the icon.
dstringThe pathDefinition of the icon.
path`React.ReactNodeReact.ReactNode[]`
displayNamestringThe display name useful in the dev tools
Edit this page

Made byChakraandRock Content