Ctrl + K
Get StartedStylesCoreCompsCDK
Colors
Sizing
Theming
Tailwind Class Generator
Typography
Icons

Icons

You can coordinate your required icon font with ACoreX and enjoy a uniform and unified UI. ACoreX is fully compatible with fontawesome, material-icon and etc. icons.

ACoreX does not have an icon section on its own, as it is not designed specifically for icons, but it is compatible with all icon fonts with a mapping system. To use the icon, you must add the required icon font to the project and rewrite the variables (only scss) or classes to display the icons inside the component, this rewrite includes the .ax-icon class, which must be the font-family of the icon font Give it and the classes or variables of its subset, which is the value of content in each icon (:before). Also, ACoreX has put some popular icon fonts in the @acorex/styles/icons package for your convenience, and you just need to call it.

To use the icon, you must add the required icon font to the project and rewrite the variables (only scss) or classes to display the icons inside the component, this rewrite includes the .ax-icon class, which must be the font-family of the icon font Give it and the classes or variables of its subset, which is the value of content in each icon (:before pseudo-element).

styles.scss

Also, ACoreX has put some popular icon fonts in the @acorex/styles/icons package for your convenience, and you just need to call it.

styles.scss

ACoreX also has a series of classes to determine the icon font weight, which is as follows

styles.scss

Icon list

List of icons used in the framework
900
more-horizontal\f141
more-vertical\f142
arrow-long-up\f176
arrow-long-down\f175
color-palette\f53f
arrow-left\f0d9
arrow-down\f0d7
arrow-up\f0d8
arrow-right\f0da
chevron-left\f053
chevron-down\f078
chevron-up\f077
chevron-right\f054
first-page\f33e
last-page\f340
calendar\f133
info\f05a
error\f06a
warning\f071
check\f00c
check-circle\f058
dobble-check\f560
close\f00d
clear\f057
visibility-off\f070
visibility\f06e
unfold-more\f0dc
download\f019
upload\e09a
search\f002
copy\f0c5
refresh\f021
inbox\f01c
emoji\f118
attach\f0c6
mic\f130
send\f1d8
play\f04b
pause\f04c
reload\f2f9
heart\f004
comment\f075
bold\f032
italic\f033
strike\f0cc
under-line\f0cd
order-list\f0cb
un-order-list\f0ca
align-left\f036
align-right\f038
align-center\f037
align-justify\f039
undo\f0e2
redo\f01e
highlight\f591
link\f0c1
image\f03e

Copyright ©2017-2025 ACoreX Labs Inc.

On this page