Icons
Icons are delightful, beautifully crafted symbols which we use to visually communicate core elements of a product and available actions. They are an important part of our brand, so we craft each icon according to our established standards, rather than pull them from third-party libraries.
Properties
By default, many of our icons possess a fill opacity of 0.65. In order to override this opacity, one must:
- Pass a color prop with a value equaling “currentColor” to the icon component.
- Assign a color style attribute to a parent element of the icon component, which will be inherited by the icon component.
- For more information regarding the “currentColor” keyword, please visit the Mozilla Developer Network website.
Additionally, Icons are offered with the following property variables:
| Prop | Type | Default | Notes |
|---|---|---|---|
size | String | small | Can be small, regular or large. |
type | String | outline | Can be outline or filled. |
color | String | N/A | Icon fill color |
children | Node | N/A | <title> can be passed here. |
Size Options
36px
24px
16px
Code
<div>
<InfoIcon size='large'>
<title>
Info Icon
</title>
</InfoIcon>
<InfoIcon size='regular'>
<title>
Info Icon
</title>
</InfoIcon>
<InfoIcon>
<title>
Info Icon
</title>
</InfoIcon>
</div>
