Hello !
I’m slowly transitioning from @atlaskit Custom UI to uikit2/react@10.
I’m wondering how to set the color of icons. I even did not do anything fancy, just using the color.icon
token.
Custom UI:
<DocumentsIcon size={'medium'} primaryColor={token('color.icon')} label={'Copy Document'}/>
Using uilkit2,
- there is no option for color
- the token
color.icon
is defined in none of the xcss types, making it impossible to set via a Box
style.
Any idea ?
Thanks !
5 Likes
The closest thing I could think of is to use a Button with icon instead and then follow the color schemes provided by the appearance
prop and it handles dark mode automatically:

1 Like
Thanjs @yongchong.long .
It does not match my use case.
For example, I want to display
<Inline space={'space.100'}>
<Icon glyph="add" size={'medium'} label={'New Document'}/>
<ModalTitle>{props.title}</ModalTitle>
</Inline>
The icon color should be customizable, or at least be the token color.icon
.
It is none of those.
1 Like
@FabienLydoire this functionality isn’t currently available in the latest UI kit (previously known as UI kit 2) so if you require it, for now you’d be best to stick with Custom UI and Atlaskit.
I have also passed this post along to the Forge UI team so they can consider adding a feature request for this functionality to the UI kit backlog.
Cheers!
Melissa
4 Likes
Melissa,
I figured out a way to tint an icon using Box
and xcss
.
<Inline space={'space.100'}>
<Box xcss={xcss({ color: 'color.text.subtle' })}>
<Icon glyph="add" size={'medium'} label={'New Document'}/>
</Box>
<ModalTitle>{props.viewModel.title}</ModalTitle>
</Inline>
Unfortunately, the xcss
does not allow usage of color.icon
token family.
I did fallback to use color.text.subtle
which is the same color than color.icon
according to the ADS Design tokens documentation.
Probably the color.icon
token is reserved for the upcoming color
prop for the Icon
component ? 
2 Likes
Thanks for sharing this trick! I’m sure many will find this helpful. I’ve tested all the currently available color
tokens and it seems like only color.text
and color.link
tokens work, e.g. you can get a purple like icon with color.link.visited
:

The xcss
accepted tokens are explicitly defined in Typescript.
./node_modules/@atlaskit/primitives/dist/types/xcss/xcss.d.ts
Generally speaking, looking at the TypeScript types is very helpful to determine the capabilities of a Forge component.
Depending on your IDE, you can “command” or “option” click on the xcss color
attribute and land in that file !
readonly color: {
readonly 'color.text': "var(--ds-text)";
readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
readonly 'color.text.accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
readonly 'color.text.accent.yellow': "var(--ds-text-accent-yellow)";
readonly 'color.text.accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
readonly 'color.text.accent.green': "var(--ds-text-accent-green)";
readonly 'color.text.accent.green.bolder': "var(--ds-text-accent-green-bolder)";
readonly 'color.text.accent.teal': "var(--ds-text-accent-teal)";
readonly 'color.text.accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
readonly 'color.text.accent.blue': "var(--ds-text-accent-blue)";
readonly 'color.text.accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
readonly 'color.text.accent.purple': "var(--ds-text-accent-purple)";
readonly 'color.text.accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
readonly 'color.text.accent.magenta': "var(--ds-text-accent-magenta)";
readonly 'color.text.accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
readonly 'color.text.accent.gray': "var(--ds-text-accent-gray)";
readonly 'color.text.accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
readonly 'color.text.disabled': "var(--ds-text-disabled)";
readonly 'color.text.inverse': "var(--ds-text-inverse)";
readonly 'color.text.selected': "var(--ds-text-selected)";
readonly 'color.text.brand': "var(--ds-text-brand)";
readonly 'color.text.danger': "var(--ds-text-danger)";
readonly 'color.text.warning': "var(--ds-text-warning)";
readonly 'color.text.warning.inverse': "var(--ds-text-warning-inverse)";
readonly 'color.text.success': "var(--ds-text-success)";
readonly 'color.text.discovery': "var(--ds-text-discovery)";
readonly 'color.text.information': "var(--ds-text-information)";
readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
readonly 'color.text.subtle': "var(--ds-text-subtle)";
readonly 'color.link': "var(--ds-link)";
readonly 'color.link.pressed': "var(--ds-link-pressed)";
readonly 'color.link.visited': "var(--ds-link-visited)";
readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
};
3 Likes
From my understanding, the /@atlaskit/forge-react-types/src/components/__generated__/IconProps.codegen.tsx
file, defines :
export type IconColor = Extract<ActiveTokens, `color.icon.${string}`>;
How can we then use the color.icon
in there?
https://atlassian.design/components/tokens/all-tokens#color-icon
Can this be addressed ?
1 Like
Yes but the color.icon
is not available if you look at the below type.
Any other color.icon.*
would be accepted, but not that particular one
Thanks for pointing this out @GuillaumeBero , I see we’re missing that token in our types. We will look to correct this in the next release. For now, if you ignore the type error, the token should still apply despite the type error.