Icons use graphical symbols to represent an object or concept in your UI. They can be used to aid comprehension of core actions in your app, and to provide feedback for user input.
The Icon component allows you to use your own SVG to easily create an icon.
In addition to the generic Icon component, Mineral UI provides a large number of pre-built Icon components, available separately in the mineral-ui-icons package.
Examples #
Import Syntax #
To render a custom icon, use the default export from the mineral-ui/Icon package.
import Icon from 'mineral-ui/Icon';Import Mineral UI's provided icons directly from the mineral-ui-icons package.
import IconSentimentSatisfied from 'mineral-ui-icons/IconSentimentSatisfied';Color #
You can apply a color to any icon. In most cases, the icon should share color with its associated label.
<IconSentimentSatisfied color="coral" />Sizes #
Icons are available in three preset sizes, or you can supply your own custom size.
<div> <IconSentimentSatisfied size="small" /> <IconSentimentSatisfied /> <IconSentimentSatisfied size="large" /> <IconSentimentSatisfied size="7em" /> </div>
Title #
Standalone icons need a title, as opposed to decorative icons
(those that repeat the information conveyed by text or do not add significant
value). Mineral UI generates the hooks for
assistive technologies
after you set the title attribute here. Icons do not need to set an alt
attribute.
<IconSentimentSatisfied title="smiley-face" />Bidirectionality #
Some icons will be automatically mirrored for right-to-left (RTL) languages, depending on context.
<ThemeProvider theme={{ direction: 'rtl' }}> <IconHelp /> </ThemeProvider>
Custom #
You can render a custom icon by supplying an SVG as a child to Icon.
The default export from the Icon package is the custom wrapper.
import Icon from 'mineral-ui/Icon'
<Icon size="7em" title="CA Technologies"> <svg viewBox="0 0 16 16"> <path className="trademark" d="M14.514 10.187c-0.256 0-0.419-0.186-0.419-0.442s0.186-0.442 0.419-0.442c0.256 0 0.419 0.186 0.419 0.442 0 0.279-0.163 0.442-0.419 0.442zM14.514 9.373c-0.209 0-0.372 0.14-0.372 0.395s0.163 0.372 0.372 0.372c0.209 0 0.372-0.14 0.372-0.372 0-0.256-0.163-0.395-0.372-0.395zM14.653 9.977l-0.14-0.209h-0.070v0.209h-0.093v-0.489h0.14c0.093 0 0.163 0.047 0.163 0.14 0 0.070-0.047 0.116-0.093 0.14l0.14 0.186-0.047 0.023zM14.514 9.582h-0.070v0.14h0.070c0.047 0 0.093-0.023 0.093-0.070s-0.023-0.070-0.093-0.070z" /> <g className="technologies"> <path d="M0.788 12.187v-0.465h0.349v0.465h0.279v0.279h-0.279v0.814c0 0.070 0.047 0.093 0.116 0.093 0.047 0 0.116-0.023 0.163-0.023v0.279c-0.093 0-0.186 0.023-0.279 0.023-0.256 0-0.349-0.116-0.349-0.326v-0.861h-0.186v-0.279h0.186z" /> <path d="M1.905 12.955c0 0.302 0.14 0.419 0.302 0.419s0.233-0.070 0.326-0.163l0.256 0.163c-0.14 0.209-0.326 0.302-0.605 0.302-0.372 0-0.605-0.279-0.605-0.744s0.233-0.744 0.605-0.744c0.372 0 0.582 0.326 0.582 0.651v0.116h-0.861zM2.44 12.722c0-0.209-0.116-0.302-0.279-0.302s-0.279 0.116-0.279 0.302h0.558z" /> <path d="M3.859 12.653c-0.047-0.116-0.116-0.209-0.279-0.209-0.186 0-0.279 0.14-0.279 0.465s0.093 0.465 0.279 0.465c0.14 0 0.233-0.093 0.302-0.233l0.256 0.14c-0.14 0.256-0.302 0.349-0.558 0.349-0.395 0-0.605-0.279-0.605-0.744s0.233-0.744 0.605-0.744c0.279 0 0.489 0.14 0.558 0.372l-0.279 0.14z" /> <path d="M4.394 13.607v-1.977h0.349v0.698c0.093-0.093 0.233-0.186 0.419-0.186 0.279 0 0.419 0.186 0.419 0.489v0.977h-0.349v-0.931c0-0.186-0.070-0.256-0.186-0.256-0.14 0-0.256 0.093-0.326 0.163v1.024h-0.326z" /> <path d="M5.906 13.607v-1.442h0.302v0.163c0.116-0.093 0.279-0.186 0.442-0.186 0.279 0 0.419 0.186 0.419 0.489v0.977h-0.349v-0.931c0-0.186-0.070-0.256-0.186-0.256-0.14 0-0.256 0.093-0.326 0.163v1.024h-0.302z" /> <path d="M7.953 12.164c0.395 0 0.628 0.279 0.628 0.744s-0.233 0.744-0.628 0.744c-0.395 0-0.628-0.279-0.628-0.744s0.233-0.744 0.628-0.744zM7.953 12.443c-0.186 0-0.279 0.14-0.279 0.465s0.093 0.465 0.279 0.465c0.186 0 0.279-0.14 0.279-0.465s-0.093-0.465-0.279-0.465z" /> <path d="M8.837 13.607v-1.977h0.349v1.977z" /> <path d="M10.070 12.164c0.395 0 0.628 0.279 0.628 0.744s-0.233 0.744-0.628 0.744c-0.395 0-0.628-0.279-0.628-0.744s0.233-0.744 0.628-0.744zM10.070 12.443c-0.186 0-0.279 0.14-0.279 0.465s0.093 0.465 0.279 0.465c0.186 0 0.279-0.14 0.279-0.465s-0.093-0.465-0.279-0.465z" /> <path d="M12.094 12.397c-0.070 0-0.163 0-0.209 0.023 0.047 0.070 0.070 0.14 0.070 0.256 0 0.279-0.186 0.465-0.535 0.465-0.14 0-0.256 0-0.256 0.093 0 0.233 0.931-0.093 0.931 0.489 0 0.209-0.209 0.419-0.651 0.419-0.372 0-0.628-0.116-0.628-0.349 0-0.186 0.14-0.256 0.256-0.256v0c-0.070-0.047-0.209-0.070-0.209-0.233 0-0.14 0.163-0.233 0.209-0.256-0.116-0.093-0.209-0.209-0.209-0.372 0-0.256 0.186-0.489 0.558-0.489 0.116 0 0.256 0.047 0.349 0.116 0.070-0.093 0.163-0.14 0.326-0.116v0.209zM11.094 13.746c0 0.116 0.093 0.163 0.372 0.163 0.209 0 0.302-0.116 0.302-0.163 0-0.070-0.093-0.163-0.419-0.163-0.209 0-0.256 0.116-0.256 0.163zM11.396 12.42c-0.14 0-0.256 0.093-0.256 0.233s0.093 0.233 0.256 0.233c0.14 0 0.233-0.116 0.233-0.233 0-0.14-0.093-0.233-0.233-0.233z" /> <path d="M12.327 11.932v-0.326h0.349v0.326h-0.349zM12.676 13.188v0.419h-0.349v-1.442h0.349v1.024z" /> <path d="M13.281 12.955c0 0.302 0.14 0.419 0.302 0.419s0.233-0.070 0.326-0.163l0.256 0.163c-0.14 0.209-0.326 0.302-0.605 0.302-0.372 0-0.605-0.279-0.605-0.744s0.233-0.744 0.628-0.744c0.372 0 0.582 0.326 0.582 0.651v0.116h-0.884zM13.816 12.722c0-0.209-0.116-0.302-0.279-0.302s-0.279 0.116-0.279 0.302h0.558z" /> <path d="M15.119 12.56c-0.070-0.070-0.163-0.14-0.256-0.14-0.14 0-0.186 0.047-0.186 0.14 0 0.256 0.721 0.14 0.721 0.675 0 0.302-0.233 0.419-0.512 0.419-0.233 0-0.419-0.093-0.535-0.279l0.233-0.163c0.070 0.116 0.186 0.209 0.326 0.209 0.116 0 0.209-0.070 0.209-0.163 0-0.233-0.721-0.163-0.721-0.651 0-0.256 0.233-0.419 0.465-0.419 0.186 0 0.372 0.070 0.512 0.209l-0.256 0.163z" /> </g> <g className="ca"> <path d="M10.838 8.14c-0.279 0.419-0.698 0.675-1.186 0.675-0.651 0-1.21-0.302-1.21-1.024 0-1.047 1.535-1.419 2.722-1.489v0.302c0 0.698 0 1.047-0.326 1.535zM8.651 4.348c0.186-0.489 0.651-0.675 1.303-0.675 0.931 0 1.186 0.651 1.21 1.186v0.256c-2.559 0.116-4.955 0.605-4.909 2.931 0.023 1.628 1.512 2.303 2.536 2.303 1.186 0 1.838-0.326 2.489-1.117 0 0.349 0.047 0.698 0.116 0.954h2.28c-0.116-0.395-0.163-0.814-0.163-1.21v-4.257c0-1.024-0.186-1.605-0.744-2.117-0.535-0.489-1.373-0.744-2.536-0.744-1.070 0-1.977 0.233-2.652 0.698v0c0.558 0.465 0.931 1.070 1.070 1.791v0z" /> <path d="M6.116 7.953c0 0.047 0 0.093 0 0.14 0 0.023 0 0.047 0 0.070 0.047 0.837 0.442 1.349 0.814 1.652-0.628 0.372-1.396 0.512-2.070 0.512-2.443 0.023-3.908-1.721-3.908-4.141 0-2.512 1.512-4.327 4.071-4.327 1.861 0 3.396 1 3.559 2.931h-2.233c0-0.744-0.512-1.117-1.233-1.117-1.163 0-1.512 0.814-1.512 2.326 0 1.535 0.326 2.419 1.512 2.419 0.442 0 0.791-0.14 1-0.465v0z" /> </g> </svg> </Icon>
Icons by Category #
action #
notification #
editor #
av #
social #
hardware #
maps #
content #
image #
communication #
places #
navigation #
device #
toggle #
alert #
file #
API & Theme #
Icon Props #
The Icon component takes the following React props.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React$Node | SVG content, required for the generic Icon component | |
| color | string | Fill color | |
| rtl | boolean | Flip the Icon horizontally when used with RTL languages | |
| size | 'small' | 'medium' | 'large' | number | string | 'medium' | Available sizes, including custom - e.g. '5em' or '20px' |
| title | string | Alternative text |
Icon Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| Icon_fill | currentcolor |
| Icon_size_small | 0.75em |
| Icon_size_medium | 1em |
| Icon_size_large | 1.25em |
Usage #
When/How to Use #
Icons can symbolize actions and objects in your interface. Use icons in combination with labels to help users more quickly process your UI.
Don't use too many icons or you run the risk of creating visual clutter.
Icons are usually used inside of a Button to reinforce the action. If used alone, Icon placement should be very clear. For example, a play icon ► could be used instead of writing out the word "Play".
Icons should only be used if they aid communication, not merely for decoration.
Best Practices #
Use Icons with labels. Icons are used to reinforce a message.
Don't present an Icon without a label unless it is very simple and well-known.
Don't use Icons as decoration. In large lists of Buttons, avoid using Icons on all elements, as they become visual noise.