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
xsmall
orsmall
together with smaller text sizes - use
xlarge
orlarge
as 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 | large medium small xlarge xsmall | 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';