For sizing relative to accompanying text. When using an icon within a Text or Heading component, it will scale in size accordingly.In this form, icons are scaled to 120% of the text size and are bled into the surrounding layout — not introducing any additional whitespace.
The size prop cannot be used, as the size is determined by the parent typography component.
Text size xsmall with an iconText size small with an iconText size standard with an iconText size large with an icon
The foreground colour of icons can be set by applying the correct tone. When placed inside of a Text component, icons will inherit its tone.Additionally, an icon can have an explicit tone specified to override the inherited colour.
The position of an icon may require adjustment based on the characters it neighbours. By default, icons are optimized to sit alongside capital letters. If required, the alignY prop can set to lowercase — typically for use in the middle or at the end of a sentence.
Braid aims to provide an icon set that caters to the majority of use cases spanning across many products. However, there may be a need to have product-specific icons outside of the library. For this use case consumers can use the IconRenderer component.Uses the render prop pattern to provide the required classes to style and align a custom icon.
To make the alignment of icons and typography as seemless as possible, IconRenderer supports inline sizing. As a result, it must be used inside either a Text or Heading component.For example, here is a custom circle alongside a Heading:
The Braid icon set is designed using only a single colour (black), and then configured to adopt the colour of either their parent component or the specified tone prop.If the custom icon should inherit its colour, this can be done using the currentColor value.
EXAMPLE: Setting “fill=currentColor” on custom icon inside “brandAccent” Text
When using custom icons, it is important to consider their purpose to the end user. Are they being used as an image? Or are they purely decorative?If they are decorative only, then it is recommended they be hidden from screen readers by applying the aria-hidden attribute as in the following example:
However, if they provide value or context, then they should be titled correctly as though they were an image. Below is an example of how to correctly title an icon as an image: