NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Icon

import Icon from '@concur/nui-widgets/lib/Icon/Icon';

Icons are either used to decorate a site or application or convey meaning for certain elements within a site or application.

Examples

Available Icons

Use the iconName property to specify which icon to render.

{ICON_NAMES.map(icon => (
    <div className='hig-icon-container' key={icon}>
        <Icon
            ariaHidden
            iconName={icon}
            size='lg' />
        <div>{icon}</div>
    </div>
))}

Sizes

Four standard sizes are supported: 'lg', 'md', 'sm' (the default) and 'xs'. A number of other sizes exist to complete the size ramp (see the size property for a full list). Use the size property to set the size.

<table className='reporttable'>
    <thead>
        <tr>
            <th>Size</th>
            <th className='text-center' colSpan={5}>Examples</th>
        </tr>
    </thead>
    <tbody>
        {['lg', 'md', 'sm', 'xs'].map((size) => (
            <tr>
                <td>{size}</td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon air'
                        iconName='air'
                        size={size} />
                </td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon air rail'
                        iconName='air-rail'
                        size={size} />
                </td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon success'
                        iconName='messaging-success'
                        size={size} />
                </td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon warning'
                        iconName='messaging-warning'
                        size={size} />
                </td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon error'
                        iconName='messaging-error'
                        size={size} />
                </td>
                <td className='text-center'>
                    <Icon
                        ariaLabel='Icon info'
                        iconName='messaging-info'
                        size={size} />
                </td>
            </tr>
        ))}
    </tbody>
</table>

Usage

Properties

Property Type Default Description
iconName String Required The name of the desired icon. See Available Icons for a complete list. NOTE: If you use warning-icon this component will render an <svg>, all other icons render an <i>
ariaLabel String Required
(unless ariaHidden is true)		 Text to describe the icon. The value is placed in the aria-label attribute.
ariaHidden Boolean false The value for the aria-hidden attribute. Set to true when there is already visible text explaining the icon or the icon is purely for decoration.
className String   Custom classes to add to the icon’s tag.
size String 'sm' Icon size. Options are 'lg', 'lg-minus', 'md-plus', 'md', 'md-minus', 'sm-plus', 'sm', 'sm-minus', 'xs-plus', 'xs'.