Icons

Documentation on how to use grommet-icons.

Props

a11yTitle

Custom title to be used by screen readers.

string

"a user friendly label for screen readers"

color

Color of the icon.

string

'plain'

object

{ dark: 'white', light: 'black' }

height

A text t-shirt size to align the height of an icon with the text line-height. This is useful when an icon's dimensions is smaller than the text line-height and the icon is presented in a row with align="start". The size of the icon will not be changed, but top and bottom padding will be added to align the icon with the text.

string

"medium"

size

Size of the icon.

string

"medium"

Theme

icon.extend

Any additional styles to place on the icon.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

icon.size

The height and width of the icon.

object

{ 
    small: string;
    medium: string;
    large: string;
    xlarge: string;
}

icon.disableScaleDown

When set to true, vector-effect="non-scaling-stroke" is added to simple icons. Currently this affects Add, Checkmark, Close, Down, LinkDown, LinkNext, LinkUp, Next, Previous, Search, and Up.

boolean

true

false

icon.matchSize

When true, Grommet components that have a size prop and an icon will pass the component size to the icon.

boolean

true

false