arrow

Elements
    Properties
      Sizes
        SVG
        <img data-src="arrow.svg" class="iconic iconic-sm" alt="arrow">
        <img data-src="arrow.svg" class="iconic iconic-md" alt="arrow">
        <img data-src="arrow.svg" class="iconic iconic-lg" alt="arrow">
        
        Default Icon Font
        <span class="iconic iconic-sm" data-glyph="arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        <span class="iconic iconic-md" data-glyph="arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        <span class="iconic iconic-lg" data-glyph="arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        
        Bootstrap Icon Font
        <span class="iconic iconic-arrow-right-fill iconic-sm" title="arrow right fill" aria-hidden="true"></span>
        <span class="iconic iconic-arrow-right-fill iconic-md" title="arrow right fill" aria-hidden="true"></span>
        <span class="iconic iconic-arrow-right-fill iconic-lg" title="arrow right fill" aria-hidden="true"></span>
        
        Foundation Icon Font
        <span class="fi-arrow-right-fill iconic-sm" title="arrow right fill" aria-hidden="true"></span>
        <span class="fi-arrow-right-fill iconic-md" title="arrow right fill" aria-hidden="true"></span>
        <span class="fi-arrow-right-fill iconic-lg" title="arrow right fill" aria-hidden="true"></span>
        
        CSS

        Semantic SVG

        data-direction

        Sets the direction of the arrow

        • right

          <img data-direction="right" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • top

          <img data-direction="top" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • left

          <img data-direction="left" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • bottom

          <img data-direction="bottom" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • top-right

          <img data-direction="top-right" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • top-left

          <img data-direction="top-left" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • bottom-right

          <img data-direction="bottom-right" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • bottom-left

          <img data-direction="bottom-left" data-src="arrow.svg" class="iconic" alt="arrow" />
          

        data-head

        Sets the arrow head style

        • fill

          <img data-head="fill" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-acute

          <img data-head="fill-acute" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-oblique

          <img data-head="fill-oblique" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-angled

          <img data-head="fill-angled" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-large

          <img data-head="fill-large" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-large-acute

          <img data-head="fill-large-acute" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-large-oblique

          <img data-head="fill-large-oblique" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • fill-large-angled

          <img data-head="fill-large-angled" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line

          <img data-head="line" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line-acute

          <img data-head="line-acute" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line-oblique

          <img data-head="line-oblique" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line-large

          <img data-head="line-large" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line-large-acute

          <img data-head="line-large-acute" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        • line-large-oblique

          <img data-head="line-large-oblique" data-src="arrow.svg" class="iconic" alt="arrow" />
          
        Method name

        Options/Examples

        setDirection(direction)

        right
        top
        left
        bottom
        top-right
        top-left
        bottom-right
        bottom-left

        setHead(head)

        fill
        fill-acute
        fill-oblique
        fill-angled
        fill-large
        fill-large-acute
        fill-large-oblique
        fill-large-angled
        line
        line-acute
        line-oblique
        line-large
        line-large-acute
        line-large-oblique

        Icon Font

        Iconic may be all about SVG, but it also comes with a killer font. For the full skinny, read our icon font and Bootstrap/Foundation guides.

        <!-- Default -->
        <span class="iconic" data-glyph="arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        <!-- Bootstrap -->
        <span class="iconic iconic-arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        <!-- Foundation -->
        <span class="fi-arrow-right-fill" title="arrow right fill" aria-hidden="true"></span>
        
        • arrow-right-fill

        • arrow-right-fill-acute

        • arrow-right-fill-oblique

        • arrow-right-fill-angled

        • arrow-right-fill-large

        • arrow-right-fill-large-acute

        • arrow-right-fill-large-oblique

        • arrow-right-fill-large-angled

        • arrow-right-line

        • arrow-right-line-acute

        • arrow-right-line-oblique

        • arrow-right-line-large

        • arrow-right-line-large-acute

        • arrow-right-line-large-oblique

        • arrow-top-fill

        • arrow-top-fill-acute

        • arrow-top-fill-oblique

        • arrow-top-fill-angled

        • arrow-top-fill-large

        • arrow-top-fill-large-acute

        • arrow-top-fill-large-oblique

        • arrow-top-fill-large-angled

        • arrow-top-line

        • arrow-top-line-acute

        • arrow-top-line-oblique

        • arrow-top-line-large

        • arrow-top-line-large-acute

        • arrow-top-line-large-oblique

        • arrow-left-fill

        • arrow-left-fill-acute

        • arrow-left-fill-oblique

        • arrow-left-fill-angled

        • arrow-left-fill-large

        • arrow-left-fill-large-acute

        • arrow-left-fill-large-oblique

        • arrow-left-fill-large-angled

        • arrow-left-line

        • arrow-left-line-acute

        • arrow-left-line-oblique

        • arrow-left-line-large

        • arrow-left-line-large-acute

        • arrow-left-line-large-oblique

        • arrow-bottom-fill

        • arrow-bottom-fill-acute

        • arrow-bottom-fill-oblique

        • arrow-bottom-fill-angled

        • arrow-bottom-fill-large

        • arrow-bottom-fill-large-acute

        • arrow-bottom-fill-large-oblique

        • arrow-bottom-fill-large-angled

        • arrow-bottom-line

        • arrow-bottom-line-acute

        • arrow-bottom-line-oblique

        • arrow-bottom-line-large

        • arrow-bottom-line-large-acute

        • arrow-bottom-line-large-oblique

        • arrow-top-right-fill

        • arrow-top-right-fill-acute

        • arrow-top-right-fill-oblique

        • arrow-top-right-fill-angled

        • arrow-top-right-fill-large

        • arrow-top-right-fill-large-acute

        • arrow-top-right-fill-large-oblique

        • arrow-top-right-fill-large-angled

        • arrow-top-right-line

        • arrow-top-right-line-acute

        • arrow-top-right-line-oblique

        • arrow-top-right-line-large

        • arrow-top-right-line-large-acute

        • arrow-top-right-line-large-oblique

        • arrow-top-left-fill

        • arrow-top-left-fill-acute

        • arrow-top-left-fill-oblique

        • arrow-top-left-fill-angled

        • arrow-top-left-fill-large

        • arrow-top-left-fill-large-acute

        • arrow-top-left-fill-large-oblique

        • arrow-top-left-fill-large-angled

        • arrow-top-left-line

        • arrow-top-left-line-acute

        • arrow-top-left-line-oblique

        • arrow-top-left-line-large

        • arrow-top-left-line-large-acute

        • arrow-top-left-line-large-oblique

        • arrow-bottom-right-fill

        • arrow-bottom-right-fill-acute

        • arrow-bottom-right-fill-oblique

        • arrow-bottom-right-fill-angled

        • arrow-bottom-right-fill-large

        • arrow-bottom-right-fill-large-acute

        • arrow-bottom-right-fill-large-oblique

        • arrow-bottom-right-fill-large-angled

        • arrow-bottom-right-line

        • arrow-bottom-right-line-acute

        • arrow-bottom-right-line-oblique

        • arrow-bottom-right-line-large

        • arrow-bottom-right-line-large-acute

        • arrow-bottom-right-line-large-oblique

        • arrow-bottom-left-fill

        • arrow-bottom-left-fill-acute

        • arrow-bottom-left-fill-oblique

        • arrow-bottom-left-fill-angled

        • arrow-bottom-left-fill-large

        • arrow-bottom-left-fill-large-acute

        • arrow-bottom-left-fill-large-oblique

        • arrow-bottom-left-fill-large-angled

        • arrow-bottom-left-line

        • arrow-bottom-left-line-acute

        • arrow-bottom-left-line-oblique

        • arrow-bottom-left-line-large

        • arrow-bottom-left-line-large-acute

        • arrow-bottom-left-line-large-oblique

        was copied for yah