Here we will learn directional icons in font awesome with examples and different types of directional icons (arrows, circle arrow, caret icons, chevron hand icons, long arrow, and toggle) in font awesome with examples.
Font awesome providers different types of directional icons like an arrow up / down, arrow left, arrow right, caret up / down / left / right icons, hand icons, long arrow and toggle icons, etc.
The following table shows the list of available directional icons in the font awesome icons library.
| Name | Usage Description | Icon | Example |
|---|---|---|---|
| angle-double-down | <i class="fa fa-angle-double-down"></i> | DEMO | |
| angle-double-left | <i class="fa fa-angle-double-left"></i> | DEMO | |
| angle-double-right | <i class="fa fa-angle-double-right"></i> | DEMO | |
| angle-double-up | <i class="fa fa-angle-double-up"></i> | DEMO | |
| angle-down | <i class="fa fa-angle-down"></i> | DEMO | |
| angle-left | <i class="fa fa-angle-left"></i> | DEMO | |
| angle-right | <i class="fa fa-angle-right"></i> | DEMO | |
| angle-up | <i class="fa fa-angle-up"></i> | DEMO | |
| arrow-circle-down | <i class="fa fa-arrow-circle-down"></i> | DEMO | |
| arrow-circle-left | <i class="fa fa-arrow-circle-left"></i> | DEMO | |
| arrow-circle-right | <i class="fa fa-arrow-circle-right"></i> | DEMO | |
| arrow-circle-up | <i class="fa fa-arrow-circle-up"></i> | DEMO | |
| arrow-circle-o-down | <i class="fa fa-arrow-circle-o-down"></i> | DEMO | |
| arrow-circle-o-left | <i class="fa fa-arrow-circle-o-left"></i> | DEMO | |
| arrow-circle-o-right | <i class="fa fa-arrow-circle-o-right"></i> | DEMO | |
| arrow-circle-o-up | <i class="fa fa-arrow-circle-o-up"></i> | DEMO | |
| arrow-down | <i class="fa fa-arrow-down"></i> | DEMO | |
| arrow-left | <i class="fa fa-arrow-left"></i> | DEMO | |
| arrow-right | <i class="fa fa-arrow-right"></i> | DEMO | |
| arrow-up | <i class="fa fa-arrow-up"></i> | DEMO | |
| arrows | <i class="fa fa-arrows"></i> | DEMO | |
| arrows-alt | <i class="fa fa-arrows-alt"></i> | DEMO | |
| arrows-h | <i class="fa fa-arrows-h"></i> | DEMO | |
| arrows-v | <i class="fa fa-arrows-v"></i> | DEMO | |
| caret-down | <i class="fa fa-caret-down"></i> | DEMO | |
| caret-left | <i class="fa fa-caret-left"></i> | DEMO | |
| caret-right | <i class="fa fa-caret-right"></i> | DEMO | |
| caret-up | <i class="fa fa-caret-up"></i> | DEMO | |
| caret-square-o-down | <i class="fa fa-caret-square-o-down"></i> | DEMO | |
| caret-square-o-left | <i class="fa fa-caret-square-o-left"></i> | DEMO | |
| caret-square-o-right | <i class="fa fa-caret-square-o-right"></i> | DEMO | |
| caret-square-o-up | <i class="fa fa-caret-square-o-up"></i> | DEMO | |
| chevron-circle-down | <i class="fa fa-chevron-circle-down"></i> | DEMO | |
| chevron-circle-left | <i class="fa fa-chevron-circle-left"></i> | DEMO | |
| chevron-circle-right | <i class="fa fa-chevron-circle-right"></i> | DEMO | |
| chevron-circle-up | <i class="fa fa-chevron-circle-up"></i> | DEMO | |
| chevron-down | <i class="fa fa-chevron-down"></i> | DEMO | |
| chevron-left | <i class="fa fa-chevron-left"></i> | DEMO | |
| chevron-right | <i class="fa fa-chevron-right"></i> | DEMO | |
| chevron-up | <i class="fa fa-chevron-up"></i> | DEMO | |
| exchange | <i class="fa fa-exchange"></i> | DEMO | |
| hand-o-down | <i class="fa fa-hand-o-down"></i> | DEMO | |
| hand-o-left | <i class="fa fa-hand-o-left"></i> | DEMO | |
| hand-o-right | <i class="fa fa-hand-o-right"></i> | DEMO | |
| hand-o-up | <i class="fa fa-hand-o-up"></i> | DEMO | |
| long-arrow-down | <i class="fa fa-long-arrow-down"></i> | DEMO | |
| long-arrow-left | <i class="fa fa-long-arrow-left"></i> | DEMO | |
| long-arrow-right | <i class="fa fa-long-arrow-right"></i> | DEMO | |
| long-arrow-up | <i class="fa fa-long-arrow-up"></i> | DEMO | |
| toggle-down | <i class="fa fa-toggle-down"></i> | DEMO | |
| toggle-left | <i class="fa fa-toggle-left"></i> | DEMO | |
| toggle-right | <i class="fa fa-toggle-right"></i> | DEMO | |
| toggle-up | <i class="fa fa-toggle-up"></i> | DEMO |