Icon color definition
This issue is meant to document how we color our icons. It can be used as a guide when you have swapped out an icon library and color was not carried over. Use a new copy of our community file to see how it is set up if something are unclear.
It is a large task, and we will look into how we can make this simpler. If you have any suggestions please leave a comment on this issue. ❤️
If you "primed" by setting default color on all icons to color/neutral/text-default you can use the simplified guide in the comments.
Alert
Ikonfarger for statusvarianter.
| Color scope |
State |
Variable |
| Info |
All |
color/info/text-subtle |
| Warning |
All |
color/warning/text-subtle |
| Success |
All |
color/success/text-subtle |
| Danger |
All |
color/danger/text-subtle |
Avatar
| Color scope |
State |
Variable |
| Main |
All |
color/main/base-contrast-default |
| Support |
All |
color/support/base-contrast-default |
| Neutral |
All |
color/neutral/base-contrast-default |
Breadcrumbs
There are two icons you need to set color to. Both chevron right used on most variants. And chevron left
| Color scope |
State |
Variable |
| Main |
All |
color/main/text-subtle |
| Neutral |
All |
color/neutral/text-default |
Button
Det er to ikoner, disse er skjult som default i komponenten. Primary varianten bruker samme farge på alle states. Disabled har samme som default states.
| Variant |
Color scope |
State |
Variable |
| Primary |
Main |
All |
color/main/base-contrast-default |
| Primary |
Support |
All |
color/support/base-contrast-default |
| Primary |
Neutral |
All |
color/neutral/base-contrast-default |
| Secondary |
Main |
Default |
color/main/text-subtle |
| Secondary |
Main |
Hover |
color/main/text-default |
| Secondary |
Main |
Active |
color/main/text-default |
| Secondary |
Support |
Default |
color/support/text-subtle |
| Secondary |
Support |
Hover |
color/support/text-default |
| Secondary |
Support |
Active |
color/support/text-default |
| Secondary |
Neutral |
Default |
color/neutral/text-subtle |
| Secondary |
Neutral |
Hover |
color/neutral/text-default |
| Secondary |
Neutral |
Active |
color/neutral/text-default |
| Tertiary |
Main |
Default |
color/main/text-subtle |
| Tertiary |
Main |
Hover |
color/main/text-default |
| Tertiary |
Main |
Active |
color/main/text-default |
| Tertiary |
Support |
Default |
color/support/text-subtle |
| Tertiary |
Support |
Hover |
color/support/text-default |
| Tertiary |
Support |
Active |
color/support/text-default |
| Tertiary |
Neutral |
Default |
color/neutral/text-subtle |
| Tertiary |
Neutral |
Hover |
color/neutral/text-default |
| Tertiary |
Neutral |
Active |
color/neutral/text-default |
IconButton
Samme fargelogikk som Button.
| Variant |
Color scope |
State |
Variable |
| Primary |
Main |
All |
color/main/base-contrast-default |
| Primary |
Support |
All |
color/support/base-contrast-default |
| Primary |
Neutral |
All |
color/neutral/base-contrast-default |
| Secondary |
Main |
Default |
color/main/text-subtle |
| Secondary |
Main |
Hover |
color/main/text-default |
| Secondary |
Main |
Active |
color/main/text-default |
| Secondary |
Support |
Default |
color/support/text-subtle |
| Secondary |
Support |
Hover |
color/support/text-default |
| Secondary |
Support |
Active |
color/support/text-default |
| Secondary |
Neutral |
Default |
color/neutral/text-subtle |
| Secondary |
Neutral |
Hover |
color/neutral/text-default |
| Secondary |
Neutral |
Active |
color/neutral/text-default |
| Tertiary |
Main |
Default |
color/main/text-subtle |
| Tertiary |
Main |
Hover |
color/main/text-default |
| Tertiary |
Main |
Active |
color/main/text-default |
| Tertiary |
Support |
Default |
color/support/text-subtle |
| Tertiary |
Support |
Hover |
color/support/text-default |
| Tertiary |
Support |
Active |
color/support/text-default |
| Tertiary |
Neutral |
Default |
color/neutral/text-subtle |
| Tertiary |
Neutral |
Hover |
color/neutral/text-default |
| Tertiary |
Neutral |
Active |
color/neutral/text-default |
Chip
Its only "X-mark" som skal endres farge på her.
| Color scope |
State |
Variable |
| Main |
All |
color/main/base-contrast-default |
| Neutral |
All |
color/neutral/base-contrast-default |
Details
Details needs to be changed two places. First in the smallest subcomponent `_Details - Show/hide`, then in the individual headers.
_Details - Show/hide
| Color scope |
State |
Variable |
| Neutral |
All |
color/neutral/text-default |
.Details.Header
| Color scope |
State |
Variable |
| Main |
All |
color/main/text-default |
| Support |
All |
color/support/text-default |
| Neutral (This should already be fixed by changing the chevron) |
All |
color/neutral/text-default |
Dialog
_Header
Inside the header base component there is a hidden icon.
| Color scope |
State |
Variable |
| Neutral |
All |
color/neutral/text-default |
Close (X-mark)
The X-mark is also inside the _Header base component, but not hidden
| Color scope |
State |
Variable |
| Neutral |
All |
color/neutral/text-default |
Dropdown
Uses same color logic as Secondary Button. Icon is hidden inside the the _Buttonelement.
| Color scope |
State |
Variable |
| Main |
Default |
color/main/text-subtle |
| Main |
Hover |
color/main/text-default |
| Main |
Active |
color/main/text-default |
| Neutral |
Default |
color/neutral/text-subtle |
| Neutral |
Hover |
color/neutral/text-default |
| Neutral |
Active |
color/neutral/text-default |
Link
Left icon is default visible, but the right icon is hidden
| Color scope |
State |
Variable |
| Main |
Default |
color/main/text-subtle |
| Main |
Hover |
color/main/text-default |
| Main |
Visited |
link/color/visited |
| Neutral |
Default |
color/neutral/text-default |
| Neutral |
Hover |
color/neutral/text-subtle |
| Neutral |
Visited |
link/color/visited |
Pagination
Pagination use buttons as base components. Check that the colors are correct. one solution might be to reset the color on instances.
Search
Ikon: Magnifying glass
| Color scope |
State |
Variable |
| Neutral |
All |
color/neutral/text-default |
Table
Change the chevron icons inside .cell and header component
| Color scope |
State |
Variable |
| Main |
All |
color/main/text-default |
| Support |
All |
color/support/text-default |
| Neutral |
All |
color/neutral/text-default |
Tabs
Icon is hidden, you should change this in the _tab elements base base component.
| Variant |
Color scope |
State |
Variable |
| Default |
Main |
Default |
color/neutral/text-subtle |
| Default |
Main |
Hover |
color/neutral/text-default |
| Default |
Main |
Active |
color/main/text-subtle |
| Default |
Neutral |
Default |
color/neutral/text-subtle |
| Default |
Neutral |
Hover |
color/neutral/text-default |
| Default |
Neutral |
Active |
color/neutral/text-subtle |
Tag
There are two icons, left and right. They are hidden by default
| Color scope |
State |
Variable |
| Main |
All |
color/main/text-default |
| Neutral |
All |
color/neutral/text-default |
| Support |
All |
color/support/text-default |
| Info |
All |
color/info/text-default |
| Warning |
All |
color/warning/text-default |
| Danger |
All |
color/danger/text-default |
| Success |
All |
color/success/text-default |
Text Field
There are icons inside the prefix and suffix elements. Here is a good place to use multiedit. They are hidden by default.
| Color scope |
State |
Variable |
| Neutral |
All |
color/neutral/text-default |
ToggleGroup
You have to do this on the standard and icon-only version. They use button as a base component, but have som special overwrites. Check that all states are correct.
| Variant |
Color scope |
State |
Variable |
| Primary |
Main |
Default |
color/main/text-subtle |
| Primary |
Main |
Hover |
color/main/text-default |
| Primary |
Main |
Active |
color/main/base-contrast-default |
| Secondary |
Main |
Default |
color/main/text-subtle |
| Secondary |
Main |
Hover |
color/main/text-default |
| Secondary |
Main |
Active |
color/main/text-subtle |
| Primary |
Neutral |
Default |
color/neutral/text-subtle |
| Primary |
Neutral |
Hover |
color/neutral/text-default |
| Primary |
Neutral |
Active |
color/neutral/base-contrast-default |
| Secondary |
Neutral |
Default |
color/neutral/text-subtle |
| Secondary |
Neutral |
Hover |
color/neutral/text-default |
| Secondary |
Neutral |
Active |
color/neutral/text-subtle |
Read-only states
PadlockLocked icon is used on all read-only form components. Here is a list of where you need to set this color.
| Component |
Color scope |
State |
Variable |
| Checkbox |
Neutral |
Read-only |
color/neutral/text-default |
| Radio |
Neutral |
Read-only |
color/neutral/text-default |
| Textfield |
Neutral |
Read-only |
color/neutral/text-default |
| Textarea |
Neutral |
Read-only |
color/neutral/text-default |
| Suggestion |
Neutral |
Read-only |
color/neutral/text-default |
| Multisuggestion |
Neutral |
Read-only |
color/neutral/text-default |
| Switch |
Neutral |
Read-only |
color/neutral/text-default |
| Select |
Neutral |
Read-only |
color/neutral/text-default |
Icon color definition
This issue is meant to document how we color our icons. It can be used as a guide when you have swapped out an icon library and color was not carried over. Use a new copy of our community file to see how it is set up if something are unclear.
It is a large task, and we will look into how we can make this simpler. If you have any suggestions please leave a comment on this issue. ❤️
If you "primed" by setting default color on all icons to
color/neutral/text-defaultyou can use the simplified guide in the comments.Alert
Ikonfarger for statusvarianter.
color/info/text-subtlecolor/warning/text-subtlecolor/success/text-subtlecolor/danger/text-subtleAvatar
color/main/base-contrast-defaultcolor/support/base-contrast-defaultcolor/neutral/base-contrast-defaultBreadcrumbs
There are two icons you need to set color to. Both chevron right used on most variants. And chevron left
color/main/text-subtlecolor/neutral/text-defaultButton
Det er to ikoner, disse er skjult som default i komponenten. Primary varianten bruker samme farge på alle states. Disabled har samme som default states.
color/main/base-contrast-defaultcolor/support/base-contrast-defaultcolor/neutral/base-contrast-defaultcolor/main/text-subtlecolor/main/text-defaultcolor/main/text-defaultcolor/support/text-subtlecolor/support/text-defaultcolor/support/text-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-defaultcolor/main/text-subtlecolor/main/text-defaultcolor/main/text-defaultcolor/support/text-subtlecolor/support/text-defaultcolor/support/text-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-defaultIconButton
Samme fargelogikk som Button.
color/main/base-contrast-defaultcolor/support/base-contrast-defaultcolor/neutral/base-contrast-defaultcolor/main/text-subtlecolor/main/text-defaultcolor/main/text-defaultcolor/support/text-subtlecolor/support/text-defaultcolor/support/text-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-defaultcolor/main/text-subtlecolor/main/text-defaultcolor/main/text-defaultcolor/support/text-subtlecolor/support/text-defaultcolor/support/text-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-defaultChip
Its only "X-mark" som skal endres farge på her.
color/main/base-contrast-defaultcolor/neutral/base-contrast-defaultDetails
Details needs to be changed two places. First in the smallest subcomponent `_Details - Show/hide`, then in the individual headers._Details - Show/hidecolor/neutral/text-default.Details.Headercolor/main/text-defaultcolor/support/text-defaultcolor/neutral/text-defaultDialog
_HeaderInside the header base component there is a hidden icon.
color/neutral/text-defaultClose (X-mark)
The X-mark is also inside the
_Headerbase component, but not hiddencolor/neutral/text-defaultDropdown
Uses same color logic as Secondary Button. Icon is hidden inside the the
_Buttonelement.color/main/text-subtlecolor/main/text-defaultcolor/main/text-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-defaultLink
Left icon is default visible, but the right icon is hidden
color/main/text-subtlecolor/main/text-defaultlink/color/visitedcolor/neutral/text-defaultcolor/neutral/text-subtlelink/color/visitedPagination
Pagination use buttons as base components. Check that the colors are correct. one solution might be to reset the color on instances.Search
Ikon: Magnifying glass
color/neutral/text-defaultTable
Change the chevron icons inside
.cell and headercomponentcolor/main/text-defaultcolor/support/text-defaultcolor/neutral/text-defaultTabs
Icon is hidden, you should change this in the
_tab elements basebase component.color/neutral/text-subtlecolor/neutral/text-defaultcolor/main/text-subtlecolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-subtleTag
There are two icons, left and right. They are hidden by default
color/main/text-defaultcolor/neutral/text-defaultcolor/support/text-defaultcolor/info/text-defaultcolor/warning/text-defaultcolor/danger/text-defaultcolor/success/text-defaultText Field
There are icons inside the prefix and suffix elements. Here is a good place to use multiedit. They are hidden by default.
color/neutral/text-defaultToggleGroup
You have to do this on the standard and icon-only version. They use button as a base component, but have som special overwrites. Check that all states are correct.
color/main/text-subtlecolor/main/text-defaultcolor/main/base-contrast-defaultcolor/main/text-subtlecolor/main/text-defaultcolor/main/text-subtlecolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/base-contrast-defaultcolor/neutral/text-subtlecolor/neutral/text-defaultcolor/neutral/text-subtleRead-only states
PadlockLocked icon is used on all read-only form components. Here is a list of where you need to set this color.
color/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-defaultcolor/neutral/text-default