Font Awesome Directional Icons

Here we will learn directional icons in font awesome with examples and different type of directional icons (arrows, circle arrow, caret icons, chevron hand icons, long arrow and toogle) in font awesome with examples.

Font Awesome Directional Icons

Font awesome providers different type of directional icons like arrow up / down, arrow left, arrow right, caret up / down / left / right icons, hand icons, long arrow and toggle icons, etc.


Following table shows list of available directional icons in font awesome icons library.


NameUsage DescriptionIconExample
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

Topics Covered