Icon

GuidelinesReact

When to use

  • To add simple visual context.
  • To clarify the purpose of a feature or draw attention to a commonly understood action.
  • With text so the context is accessible to everyone.

When not to use

Component status

Released
Released
Released
Released

Content structure

Content

Use interactive icons for interactions

Use similar icons for lists

Use labels

Look & feel

Match the color

Icon Primary
#252A31
rgba(37, 42, 49, 1)
colorIconPrimary
Icon Secondary
#4F5E71
rgba(79, 94, 113, 1)
colorIconSecondary
Icon Tertiary
#BAC7D5
rgba(186, 199, 213, 1)
colorIconTertiary

List of all icons

3024
2008
3024
9860
3024
2715
3024
5982
3024
9310
9442
4947
5410
3024
3024
3024
3671
2402
3751
5083
1211
9572
3024
3024
4440
2521
3427
3024
3024
9187
9038
5988
3024
4855
3024
2193
2865
2461
5115
3024
3024
7766
3296
8851
3024
6692
3024
9372
3024
9344
3024
3024
4460
4527
4904
5952
3556
3024
2768
3024
3024
3024
6925
8647
3024
3024
3024
2264
7058
3024
3024
3024
3024
3024
5486
3024
9571
8053
3024
3024
8108
3024
3024
3024
5988
5056
3024
8770
2129
9052
4407
4623
5916
2967
6059
3046
3024
4816
3024
7844
3024
3024
1469
6728
3024
1774
3069
8630
3024
3024
9494
3372
6036
3953
2702
1707
4121
3024
3024
3024
3024
9010
7084
7878
3024
8043
8447
9902
6821
3024
7062
3024
8955
1038
5959
6683