CSS Icons
Basic icons that use only CSS
Available Icons
| Text Example |
In Button |
Class |
|
close
|
|
css-icon css-icon--close
|
|
plus
|
|
css-icon css-icon--plus
|
|
minus
|
|
css-icon css-icon--minus
|
|
circle-info
|
|
css-icon css-icon--circle-info
|
|
circle-question
|
|
css-icon css-icon--circle-question
|
|
circle
|
|
css-icon css-icon--circle
|
|
circle-outline
|
|
css-icon css-icon--circle-outline
|
|
square
|
|
css-icon css-icon--square
|
|
square-outline
|
|
css-icon css-icon--square-outline
|
|
drag-x
|
|
css-icon css-icon--drag-x
|
|
drag-y
|
|
css-icon css-icon--drag-y
|
|
triangle-right
|
|
css-icon css-icon--triangle-right
|
|
triangle-left
|
|
css-icon css-icon--triangle-left
|
|
triangle-up
|
|
css-icon css-icon--triangle-up
|
|
triangle-down
|
|
css-icon css-icon--triangle-down
|
|
angle-right
|
|
css-icon css-icon--angle-right
|
|
angle-left
|
|
css-icon css-icon--angle-left
|
|
angle-up
|
|
css-icon css-icon--angle-up
|
|
angle-down
|
|
css-icon css-icon--angle-down
|
|
arrow-right
|
|
css-icon css-icon--arrow-right
|
|
arrow-left
|
|
css-icon css-icon--arrow-left
|
|
arrow-up
|
|
css-icon css-icon--arrow-up
|
|
arrow-down
|
|
css-icon css-icon--arrow-down
|
|
menu
|
|
css-icon css-icon--menu
|
Icons that transition
Available Icons
| Icon |
Class |
Toggle State |
|
menu-to-close
|
css-icon css-icon--menu-to-close
|
|
|
plus-to-minus
|
css-icon css-icon--plus-to-minus
|
|
|
angle-right-to-down
|
css-icon css-icon--angle-right-to-down
|
|
|
angle-up-to-down
|
css-icon css-icon--angle-up-to-down
|
|
|
angle-down-to-up
|
css-icon css-icon--angle-down-to-up
|
|
Test Different Stroke Width
| Text Example |
Class |
|
close
|
css-icon css-icon--stroke-large css-icon--close
|
|
plus
|
css-icon css-icon--stroke-large css-icon--plus
|
|
minus
|
css-icon css-icon--stroke-large css-icon--minus
|
|
circle-info
|
css-icon css-icon--stroke-large css-icon--circle-info
|
|
circle-question
|
css-icon css-icon--stroke-large css-icon--circle-question
|
|
circle
|
css-icon css-icon--stroke-large css-icon--circle
|
|
circle-outline
|
css-icon css-icon--stroke-large css-icon--circle-outline
|
|
square
|
css-icon css-icon--stroke-large css-icon--square
|
|
square-outline
|
css-icon css-icon--stroke-large css-icon--square-outline
|
|
drag-x
|
css-icon css-icon--stroke-large css-icon--drag-x
|
|
drag-y
|
css-icon css-icon--stroke-large css-icon--drag-y
|
|
triangle-right
|
css-icon css-icon--stroke-large css-icon--triangle-right
|
|
triangle-left
|
css-icon css-icon--stroke-large css-icon--triangle-left
|
|
triangle-up
|
css-icon css-icon--stroke-large css-icon--triangle-up
|
|
triangle-down
|
css-icon css-icon--stroke-large css-icon--triangle-down
|
|
angle-right
|
css-icon css-icon--stroke-large css-icon--angle-right
|
|
angle-left
|
css-icon css-icon--stroke-large css-icon--angle-left
|
|
angle-up
|
css-icon css-icon--stroke-large css-icon--angle-up
|
|
angle-down
|
css-icon css-icon--stroke-large css-icon--angle-down
|
|
arrow-right
|
css-icon css-icon--stroke-large css-icon--arrow-right
|
|
arrow-left
|
css-icon css-icon--stroke-large css-icon--arrow-left
|
|
arrow-up
|
css-icon css-icon--stroke-large css-icon--arrow-up
|
|
arrow-down
|
css-icon css-icon--stroke-large css-icon--arrow-down
|
|
menu
|
css-icon css-icon--stroke-large css-icon--menu
|