Component size, gzipped: 18kb

Icon

API

Visually indicate an action or option.

If you are an Uber employee, you can access the full list of icons here.

When to use

  • Save screen real-estate in a tight user interface.
  • Guide users to where they need to go.

Examples

Icon basic usage

Arrow UpArrow UpArrow DownArrow DownArrow LeftArrow RightArrow LeftArrow Right

Available icons

Alert
Alert
import Alert from 'baseui/icon/alert'
Arrow Down
ArrowDown
import ArrowDown from 'baseui/icon/arrow-down'
Arrow Left
ArrowLeft
import ArrowLeft from 'baseui/icon/arrow-left'
Arrow Right
ArrowRight
import ArrowRight from 'baseui/icon/arrow-right'
Arrow Up
ArrowUp
import ArrowUp from 'baseui/icon/arrow-up'
Blank
Blank
import Blank from 'baseui/icon/blank'
Check Indeterminate
CheckIndeterminate
import CheckIndeterminate from 'baseui/icon/check-indeterminate'
Check
Check
import Check from 'baseui/icon/check'
Chevron Down
ChevronDown
import ChevronDown from 'baseui/icon/chevron-down'
Chevron Left
ChevronLeft
import ChevronLeft from 'baseui/icon/chevron-left'
Chevron Right
ChevronRight
import ChevronRight from 'baseui/icon/chevron-right'
Chevron Up
ChevronUp
import ChevronUp from 'baseui/icon/chevron-up'
Delete Alt
DeleteAlt
import DeleteAlt from 'baseui/icon/delete-alt'
Delete
Delete
import Delete from 'baseui/icon/delete'
Filter
Filter
import Filter from 'baseui/icon/filter'
Grab
Grab
import Grab from 'baseui/icon/grab'
Hide
Hide
import Hide from 'baseui/icon/hide'
Menu
Menu
import Menu from 'baseui/icon/menu'
Overflow
Overflow
import Overflow from 'baseui/icon/overflow'
Plus
Plus
import Plus from 'baseui/icon/plus'
Search
Search
import Search from 'baseui/icon/search'
Show
Show
import Show from 'baseui/icon/show'
Spinner
Spinner
import Spinner from 'baseui/icon/spinner'
Triangle Down
TriangleDown
import TriangleDown from 'baseui/icon/triangle-down'
Triangle Left
TriangleLeft
import TriangleLeft from 'baseui/icon/triangle-left'
Triangle Right
TriangleRight
import TriangleRight from 'baseui/icon/triangle-right'
Triangle Up
TriangleUp
import TriangleUp from 'baseui/icon/triangle-up'
Upload
Upload
import Upload from 'baseui/icon/upload'

Icon in a button

API

Icon props

NameTypeDescription
color
string
Color of icon, will be used as svg fill.
overrides
custom
Lets you customize all aspects of the component.
size
number
Size of element, will be passed to the svg width/height style. Can also be a value included in.
title
string
Allows you to set the SVG <title> label, which is used for accessibility.

Icon exports

You can import this module like so:

import {Icon} from 'baseui/icon'

It exports the following components or utility functions: