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

7031
2008
5397
9860
9394
2715
5765
5982
3126
9310
9442
4947
5410
1509
6271
6578
3671
2402
3751
5083
1211
9572
9844
1364
4440
5633
1218
9038
5715
9714
2865
6407
1585
7766
8851
1472
6692
5623
9372
6939
9344
7656
2131
4460
4527
4904
5952
3556
6740
2768
9092
9106
4993
6925
8647
9037
8009
1913
2264
7058
1331
6508
4692
9584
6354
5486
8499
9571
8053
5744
9004
8108
4779
6882
5582
5988
5056
1804
8770
2129
9052
4407
4623
5916
2967
6059
3046
5499
4816
3712
7844
6701
3286
1469
6728
4356
1774
3069
8630
4135
4381
9494
3372
6036
3953
2702
1707
4121
7219
6613
5818
6523
9010
7084
7878
7767
8043
8447
9902
6821
2993
7062
3623
8955
1038
5959
6683
8993
1504
7022
5681
7005
4911
5934
4847
6431