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
4217
4692
9584
6354
6679
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
4780
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
2187
9347
8078
7300
6896
4031
6331
4780
5244
9753
2319
9503
4372
8309
9652
7893
9233
6403
3103
1743
4331
1680
1510
8501
3445
1974
1572
9892
8530
4252
3794
9856
3688
8187
6598
9970
9299
4552
1554
9169
4469
5410
2057
8228
2101
6933
6214
8877
3221
9535
4751
9742
7857
8777
8410