remove these for now.

components.html

@@ -106,12 +106,10 @@ base_url: "../"
       <div class="component-example component-example-fullbleed">
         <header class="bar-nav">
           <a class="button-link pull-left">
-            <span class="icon icon-left"></span>
             Previous
           </a>
           <a class="button-link pull-right">
             Next
-            <span class="icon icon-right"></span>
           </a>
           <h1 class="title">Title</h1>
         </header>
@@ -120,12 +118,10 @@ base_url: "../"
 {% highlight html %}
 <header class="bar-nav">
   <a class="button-link pull-left">
-    <span class="icon icon-left"></span>
     Previous
   </a>
   <a class="button-link pull-right">
     Next
-    <span class="icon icon-right"></span>
   </a>
   <h1 class="title">Title</h1>
 </header>

dist/ratchet.css

@@ -1134,62 +1134,78 @@ input[type="button"] {
   -webkit-font-smoothing: antialiased;
 }
 
+.icon-code:before {
+  content: '\e804';
+}
+
 .icon-down:before {
-  content: '\e80a';
+  content: '\e801';
 }
 
 .icon-download:before {
-  content: '\e80e';
+  content: '\f005';
 }
 
 .icon-left:before {
-  content: '\e80b';
+  content: '\e803';
 }
 
-.icon-list:before {
-  content: '\e801';
+.icon-lg-down:before {
+  content: '\f00b';
 }
 
-.icon-menu:before {
-  content: '\e800';
+.icon-lg-left:before {
+  content: '\f00c';
+}
+
+.icon-lg-right:before {
+  content: '\f00d';
+}
+
+.icon-lg-up:before {
+  content: '\f00e';
+}
+
+.icon-list:before {
+  content: '\f008';
 }
 
 .icon-pages:before {
-  content: '\e802';
+  content: '\f000';
 }
 
 .icon-refresh:before {
-  content: '\e803';
+  content: '\f009';
 }
 
 .icon-right:before {
-  content: '\e80c';
+  content: '\e800';
 }
 
 .icon-search:before {
-  content: '\e804';
+  content: '\f007';
 }
 
 .icon-share:before {
-  content: '\e805';
+  content: '\f00a';
 }
 
 .icon-sound2:before {
-  content: '\e807';
+  content: '\f002';
 }
 
 .icon-sound3:before {
-  content: '\e808';
+  content: '\f003';
 }
 
 .icon-sound4:before {
-  content: '\e809';
+  content: '\f004';
 }
 
 .icon-sound:before {
-  content: '\e806';
+  content: '\f001';
 }
 
 .icon-up:before {
-  content: '\e80d';
+  content: '\e802';
 }

dist/ratchicons/ratchicons.svg

@@ -6,21 +6,25 @@
 <font id="ratchicons" horiz-adv-x="1000" >
 <font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="download" unicode="&#xe80e;" d="m875 538h-187v-63h125v-563h-625v563h125v63h-188v-688h750v688z m-344-323v573h-62v-573l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
-<glyph glyph-name="menu" unicode="&#xe800;" d="m650 400q22 0 36-15t14-35t-15-35t-35-15l-600 0q-20 0-35 15t-15 35t14 35t36 15l600 0z m-600 100q-20 0-35 15t-15 35t14 35t36 15l600 0q22 0 36-15t14-35t-15-35t-35-15l-600 0z m600-300q22 0 36-15t14-35t-15-35t-35-15l-600 0q-20 0-35 15t-15 35t14 35t36 15l600 0z" horiz-adv-x="700" />
-<glyph glyph-name="pages" unicode="&#xe802;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
-<glyph glyph-name="refresh" unicode="&#xe803;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
-<glyph glyph-name="search" unicode="&#xe804;" d="m1000-94l-290 291c56 68 90 156 90 250c0 219-181 400-400 400s-398-189-398-407s180-391 398-391c96 0 184 34 254 91l290-290l56 56z m-923 541c0 160 163 323 323 323s321-163 321-323s-159-316-319-316s-325 156-325 316z" horiz-adv-x="1000" />
-<glyph glyph-name="share" unicode="&#xe805;" d="m875 538h-187v-63h125v-563h-625v563h125v63h-188v-688h750v688z m-406 197v-510h62v510l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
-<glyph glyph-name="sound" unicode="&#xe806;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="list2" unicode="&#xe801;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
-<glyph glyph-name="sound3" unicode="&#xe808;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound4" unicode="&#xe809;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
-<glyph glyph-name="down" unicode="&#xe80a;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
-<glyph glyph-name="left" unicode="&#xe80b;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
-<glyph glyph-name="right" unicode="&#xe80c;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
-<glyph glyph-name="up" unicode="&#xe80d;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
-<glyph glyph-name="sound2" unicode="&#xe807;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="download" unicode="&#xf005;" d="m875 538h-187v-63h125v-563h-625v563h125v63h-188v-688h750v688z m-344-323v573h-62v-573l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe804;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
+<glyph glyph-name="pages" unicode="&#xf000;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="refresh" unicode="&#xf009;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xf007;" d="m1000-94l-290 291c56 68 90 156 90 250c0 219-181 400-400 400s-398-189-398-407s180-391 398-391c96 0 184 34 254 91l290-290l56 56z m-923 541c0 160 163 323 323 323s321-163 321-323s-159-316-319-316s-325 156-325 316z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xf00a;" d="m875 538h-187v-63h125v-563h-625v563h125v63h-188v-688h750v688z m-406 197v-510h62v510l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
+<glyph glyph-name="sound" unicode="&#xf001;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound2" unicode="&#xf002;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound3" unicode="&#xf003;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="list" unicode="&#xf008;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
+<glyph glyph-name="lg-down" unicode="&#xf00b;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
+<glyph glyph-name="lg-left" unicode="&#xf00c;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
+<glyph glyph-name="lg-right" unicode="&#xf00d;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
+<glyph glyph-name="lg-up" unicode="&#xf00e;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
+<glyph glyph-name="right" unicode="&#xe800;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
+<glyph glyph-name="down" unicode="&#xe801;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe803;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
+<glyph glyph-name="up" unicode="&#xe802;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
+<glyph glyph-name="sound4" unicode="&#xf004;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

index.html

@@ -46,7 +46,7 @@ base_url: "./"
     </div>
     <div class="column units-1 lg-units-6">
       <div class="benefit-icon">
-        <span class="icon icon-refresh"></span>
+        <span class="icon icon-code"></span>
       </div>
       <h3 class="benefit-heading">Simple web technology</h3>
       <p class="benefit-text">Ratchet is built simple HTML, CSS, and JS. We used the power of SASS to make Ratchet extremely capable at quickly building mobile applications you can start playing with right away.</p>

lib/sass/ratchicons.scss

@@ -21,18 +21,22 @@
   cursor: default;
   -webkit-font-smoothing: antialiased;
 }
-.icon-down:before { content: '\e80a'; }
-.icon-download:before { content: '\e80e'; }
-.icon-left:before { content: '\e80b'; }
-.icon-list:before { content: '\e801'; }
-.icon-menu:before { content: '\e800'; }
-.icon-pages:before { content: '\e802'; }
-.icon-refresh:before { content: '\e803'; }
-.icon-right:before { content: '\e80c'; }
-.icon-search:before { content: '\e804'; }
-.icon-share:before { content: '\e805'; }
-.icon-sound2:before { content: '\e807'; }
-.icon-sound3:before { content: '\e808'; }
-.icon-sound4:before { content: '\e809'; }
-.icon-sound:before { content: '\e806'; }
-.icon-up:before { content: '\e80d'; }
+.icon-code:before { content: '\e804'; }
+.icon-down:before { content: '\e801'; }
+.icon-download:before { content: '\f005'; }
+.icon-left:before { content: '\e803'; }
+.icon-lg-down:before { content: '\f00b'; }
+.icon-lg-left:before { content: '\f00c'; }
+.icon-lg-right:before { content: '\f00d'; }
+.icon-lg-up:before { content: '\f00e'; }
+.icon-list:before { content: '\f008'; }
+.icon-pages:before { content: '\f000'; }
+.icon-refresh:before { content: '\f009'; }
+.icon-right:before { content: '\e800'; }
+.icon-search:before { content: '\f007'; }
+.icon-share:before { content: '\f00a'; }
+.icon-sound2:before { content: '\f002'; }
+.icon-sound3:before { content: '\f003'; }
+.icon-sound4:before { content: '\f004'; }
+.icon-sound:before { content: '\f001'; }
+.icon-up:before { content: '\e802'; }