Usage guidance
The main purpose of an Icon is to clarify the content by providing a visual cue and improve the scannability of the user interface. They can also help save screen real-estate in tight user interfaces. The Icon should never be used to replace a name of a product or feature. An Icon can frequently help enhance a Button's message or action.
Icons are available in five different sizes: xlarge, large, medium, small, and xsmall. In general though, the default size should be used.
On rare occasions there may be a need to use different sizes:
- use
xsmallorsmalltogether with smaller text sizes - use
xlargeorlargeas standalone or decorative element - for use cases where a larger than available size is required, use one of the available Assets
An Icon is an image only, therefore by default it doesn't have any label or title and is hidden from assistive technologies, such as screen readers, by default. If a description for assistive technologies is necessary, use the aria-label attribute.
Regular Icons should primarily be used on light backgrounds, whereas solid Icons should typically be used on darker backgrounds. In addition to this, most Icons will inherit their color by default but can also be overwritten on the component level. The exception to this are Icons that have Colored in their names, such as GoogleColoredBrand.
Icon within a Button
An Icon can be used together with a Button, but it's important to note that an Icon is not a button outside of this and so direct interactions should be avoided.
When used within a Button, provide the Icon via the Button's icon, iconLeft or iconRight properties. In a similar fashion to this, it can also enhance the Link component.
Best practices
General
All available Icons
Examples
Sizes
In a Button
In a Link
Build data skills online on DataCamp and get ready for the future of work.
Props
Icon
In addition to the props listed below, Icon accepts all props from React.HTMLAttributes<SVGElement>.
| Name | Type | Description |
|---|---|---|
size | largemediumsmallxlargexsmall | Defines the size of the Icon. In general, use default size. Default:
|
Imports
You can import any existing Icon as a separate component. For example to import AddCircle Icon use:
import { AddCircle } from '@datacamp/waffles/icon';
Additionally, you can also import the following types from this module:
import type { IconProps } from '@datacamp/waffles/icon';