feat: update iconset

source/_patterns/00-atoms/02-icons/icons.mustache

 <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--wheelchair"></i>
+    <i class="ico--glass"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--wheelchair</code>
+    <code>.ico--glass</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--thumbs-down"></i>
+    <i class="ico--checkmark"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--thumbs-down</code>
+    <code>.ico--checkmark</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--thumbs-up"></i>
+    <i class="ico--info"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--thumbs-up</code>
+    <code>.ico--info</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--anchor"></i>
+    <i class="ico--question"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--anchor</code>
+    <code>.ico--question</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--paw"></i>
+    <i class="ico--warning"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--paw</code>
+    <code>.ico--warning</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--dots-three-vertical"></i>
+    <i class="ico--code"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--dots-three-vertical</code>
+    <code>.ico--code</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--dots-three-horizontal"></i>
+    <i class="ico--checkbox-unchecked"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--dots-three-horizontal</code>
+    <code>.ico--checkbox-unchecked</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--log-out"></i>
+    <i class="ico--star-full"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--log-out</code>
+    <code>.ico--star-full</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--envelope"></i>
+    <i class="ico--star-empty"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--envelope</code>
+    <code>.ico--star-empty</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pin"></i>
+    <i class="ico--bookmark"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--pin</code>
+    <code>.ico--bookmark</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--at"></i>
+    <i class="ico--cog"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--at</code>
+    <code>.ico--cog</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--strategy"></i>
+    <i class="ico--key"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--strategy</code>
+    <code>.ico--key</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pig"></i>
+    <i class="ico--zoom-in"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--pig</code>
+    <code>.ico--zoom-in</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--thermometer"></i>
+    <i class="ico--zoom-out"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--thermometer</code>
+    <code>.ico--zoom-out</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--menu"></i>
+    <i class="ico--shrink"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--menu</code>
+    <code>.ico--shrink</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-right"></i>
+    <i class="ico--printer"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-right</code>
+    <code>.ico--printer</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-left"></i>
+    <i class="ico--file-openoffice"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-left</code>
+    <code>.ico--file-openoffice</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-down"></i>
+    <i class="ico--user"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-down</code>
+    <code>.ico--user</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-up"></i>
+    <i class="ico--file-excel"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-up</code>
+    <code>.ico--file-excel</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--link-horizontal"></i>
+    <i class="ico--file-word"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--link-horizontal</code>
+    <code>.ico--file-word</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--beer"></i>
+    <i class="ico--file-pdf"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--beer</code>
+    <code>.ico--file-pdf</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pirati"></i>
+    <i class="ico--file-picture"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--pirati</code>
+    <code>.ico--file-picture</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--jitsi"></i>
+    <i class="ico--file-blank"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--jitsi</code>
+    <code>.ico--file-blank</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--open-source"></i>
+    <i class="ico--folder-upload"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--open-source</code>
+    <code>.ico--folder-upload</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--checkmark"></i>
+    <i class="ico--upload"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--checkmark</code>
+    <code>.ico--upload</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--info"></i>
+    <i class="ico--cloud-upload"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--info</code>
+    <code>.ico--cloud-upload</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--question"></i>
+    <i class="ico--folder-download"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--question</code>
+    <code>.ico--folder-download</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--warning"></i>
+    <i class="ico--download"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--warning</code>
+    <code>.ico--download</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--code"></i>
+    <i class="ico--cloud-download"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--code</code>
+    <code>.ico--cloud-download</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--checkbox-unchecked"></i>
+    <i class="ico--alarm"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--checkbox-unchecked</code>
+    <code>.ico--alarm</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--star-full"></i>
+    <i class="ico--calculator"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--star-full</code>
+    <code>.ico--calculator</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--star-empty"></i>
+    <i class="ico--facebook-full"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--star-empty</code>
+    <code>.ico--facebook-full</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--bookmark"></i>
+    <i class="ico--feed"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--bookmark</code>
+    <code>.ico--feed</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cog"></i>
+    <i class="ico--library"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--cog</code>
+    <code>.ico--library</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--key"></i>
+    <i class="ico--office"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--key</code>
+    <code>.ico--office</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--zoom-in"></i>
+    <i class="ico--attachment"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--zoom-in</code>
+    <code>.ico--attachment</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--zoom-out"></i>
+    <i class="ico--enlarge"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--zoom-out</code>
+    <code>.ico--enlarge</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--shrink"></i>
+    <i class="ico--eye-off"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--shrink</code>
+    <code>.ico--eye-off</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--printer"></i>
+    <i class="ico--eye"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--printer</code>
+    <code>.ico--eye</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-openoffice"></i>
+    <i class="ico--share"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-openoffice</code>
+    <code>.ico--share</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--user"></i>
+    <i class="ico--search"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--user</code>
+    <code>.ico--search</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-excel"></i>
+    <i class="ico--pencil"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-excel</code>
+    <code>.ico--pencil</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-word"></i>
+    <i class="ico--lock-open"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-word</code>
+    <code>.ico--lock-open</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-pdf"></i>
+    <i class="ico--lock"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-pdf</code>
+    <code>.ico--lock</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-picture"></i>
+    <i class="ico--equalizer"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-picture</code>
+    <code>.ico--equalizer</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--file-blank"></i>
+    <i class="ico--switch"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--file-blank</code>
+    <code>.ico--switch</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--folder-upload"></i>
+    <i class="ico--loop"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--folder-upload</code>
+    <code>.ico--loop</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--upload"></i>
+    <i class="ico--refresh"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--upload</code>
+    <code>.ico--refresh</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cloud-upload"></i>
+    <i class="ico--bullhorn"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--cloud-upload</code>
+    <code>.ico--bullhorn</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--folder-download"></i>
+    <i class="ico--bin"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--folder-download</code>
+    <code>.ico--bin</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--download"></i>
+    <i class="ico--cross"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--download</code>
+    <code>.ico--cross</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cloud-download"></i>
+    <i class="ico--checkbox-checked"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--cloud-download</code>
+    <code>.ico--checkbox-checked</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--alarm"></i>
+    <i class="ico--globe"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--alarm</code>
+    <code>.ico--globe</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--calculator"></i>
+    <i class="ico--wikipedia"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--calculator</code>
+    <code>.ico--wikipedia</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--facebook-full"></i>
+    <i class="ico--youtube"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--facebook-full</code>
+    <code>.ico--youtube</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--feed"></i>
+    <i class="ico--users"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--feed</code>
+    <code>.ico--users</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--library"></i>
+    <i class="ico--book"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--library</code>
+    <code>.ico--book</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--office"></i>
+    <i class="ico--bubbles"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--office</code>
+    <code>.ico--bubbles</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--attachment"></i>
+    <i class="ico--map"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--attachment</code>
+    <code>.ico--map</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--enlarge"></i>
+    <i class="ico--compass"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--enlarge</code>
+    <code>.ico--compass</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--eye-off"></i>
+    <i class="ico--folder-open"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--eye-off</code>
+    <code>.ico--folder-open</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--eye"></i>
+    <i class="ico--folder"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--eye</code>
+    <code>.ico--folder</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--share"></i>
+    <i class="ico--drawer"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--share</code>
+    <code>.ico--drawer</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--search"></i>
+    <i class="ico--stop"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--search</code>
+    <code>.ico--stop</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pencil"></i>
+    <i class="ico--github"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--pencil</code>
+    <code>.ico--github</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--lock-open"></i>
+    <i class="ico--clock"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--lock-open</code>
+    <code>.ico--clock</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--lock"></i>
+    <i class="ico--calendar"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--lock</code>
+    <code>.ico--calendar</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--equalizer"></i>
+    <i class="ico--flickr"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--equalizer</code>
+    <code>.ico--flickr</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--switch"></i>
+    <i class="ico--instagram"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--switch</code>
+    <code>.ico--instagram</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--loop"></i>
+    <i class="ico--twitter"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--loop</code>
+    <code>.ico--twitter</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--refresh"></i>
+    <i class="ico--newspaper"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--refresh</code>
+    <code>.ico--newspaper</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--bullhorn"></i>
+    <i class="ico--cart"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--bullhorn</code>
+    <code>.ico--cart</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--bin"></i>
+    <i class="ico--home"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--bin</code>
+    <code>.ico--home</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cross"></i>
+    <i class="ico--link"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--cross</code>
+    <code>.ico--link</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--checkbox-checked"></i>
+    <i class="ico--power"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--checkbox-checked</code>
+    <code>.ico--power</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--globe"></i>
+    <i class="ico--rocket"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--globe</code>
+    <code>.ico--rocket</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--wikipedia"></i>
+    <i class="ico--location"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--wikipedia</code>
+    <code>.ico--location</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--youtube"></i>
+    <i class="ico--phone"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--youtube</code>
+    <code>.ico--phone</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--users"></i>
+    <i class="ico--linkedin"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--users</code>
+    <code>.ico--linkedin</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--book"></i>
+    <i class="ico--facebook"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--book</code>
+    <code>.ico--facebook</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--bubbles"></i>
+    <i class="ico--food"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--bubbles</code>
+    <code>.ico--food</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--map"></i>
+    <i class="ico--dots-three-vertical"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--map</code>
+    <code>.ico--dots-three-vertical</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--compass"></i>
+    <i class="ico--dots-three-horizontal"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--compass</code>
+    <code>.ico--dots-three-horizontal</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--folder-open"></i>
+    <i class="ico--log-out"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--folder-open</code>
+    <code>.ico--log-out</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--folder"></i>
+    <i class="ico--envelope"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--folder</code>
+    <code>.ico--envelope</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--drawer"></i>
+    <i class="ico--pin"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--drawer</code>
+    <code>.ico--pin</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--stop"></i>
+    <i class="ico--at"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--stop</code>
+    <code>.ico--at</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--github"></i>
+    <i class="ico--bed"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--github</code>
+    <code>.ico--bed</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--clock"></i>
+    <i class="ico--train"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--clock</code>
+    <code>.ico--train</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--calendar"></i>
+    <i class="ico--bus"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--calendar</code>
+    <code>.ico--bus</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--flickr"></i>
+    <i class="ico--wheelchair"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--flickr</code>
+    <code>.ico--wheelchair</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--instagram"></i>
+    <i class="ico--thumbs-down"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--instagram</code>
+    <code>.ico--thumbs-down</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--twitter"></i>
+    <i class="ico--thumbs-up"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--twitter</code>
+    <code>.ico--thumbs-up</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--newspaper"></i>
+    <i class="ico--anchor"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--newspaper</code>
+    <code>.ico--anchor</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cart"></i>
+    <i class="ico--paw"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--cart</code>
+    <code>.ico--paw</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--home"></i>
+    <i class="ico--strategy"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--home</code>
+    <code>.ico--strategy</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--link"></i>
+    <i class="ico--pig"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--link</code>
+    <code>.ico--pig</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--power"></i>
+    <i class="ico--thermometer"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--power</code>
+    <code>.ico--thermometer</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--rocket"></i>
+    <i class="ico--menu"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--rocket</code>
+    <code>.ico--menu</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--location"></i>
+    <i class="ico--chevron-right"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--location</code>
+    <code>.ico--chevron-right</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--phone"></i>
+    <i class="ico--chevron-left"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--phone</code>
+    <code>.ico--chevron-left</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--linkedin"></i>
+    <i class="ico--chevron-down"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--linkedin</code>
+    <code>.ico--chevron-down</code>
   </div>
 </div>
 
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--facebook"></i>
+    <i class="ico--chevron-up"></i>
   </div>
   <div class="card__body p-2 text-2xs">
-    <code>.ico--facebook</code>
+    <code>.ico--chevron-up</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--link-horizontal"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--link-horizontal</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--beer"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--beer</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--pirati"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--pirati</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--jitsi"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--jitsi</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--open-source"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--open-source</code>
   </div>
 </div></div>
\ No newline at end of file

source/css/atoms/icons.pcss

 
 @font-face {
   font-family: 'pirati-ui';
-  src:  url('../fonts/pirati-ui.eot?3b683ed139abeea2dea706984b122a78');
-  src:  url('../fonts/pirati-ui.eot?3b683ed139abeea2dea706984b122a78#iefix') format('embedded-opentype'),
-    url('../fonts/pirati-ui.ttf?3b683ed139abeea2dea706984b122a78') format('truetype'),
-    url('../fonts/pirati-ui.woff?3b683ed139abeea2dea706984b122a78') format('woff'),
-    url('../fonts/pirati-ui.svg?3b683ed139abeea2dea706984b122a78#pirati-ui') format('svg');
+  src:  url('../fonts/pirati-ui.eot?a677bf0df686155c0514330c9e47198a');
+  src:  url('../fonts/pirati-ui.eot?a677bf0df686155c0514330c9e47198a#iefix') format('embedded-opentype'),
+    url('../fonts/pirati-ui.ttf?a677bf0df686155c0514330c9e47198a') format('truetype'),
+    url('../fonts/pirati-ui.woff?a677bf0df686155c0514330c9e47198a') format('woff'),
+    url('../fonts/pirati-ui.svg?a677bf0df686155c0514330c9e47198a#pirati-ui') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -26,30 +26,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.ico--wheelchair:before { content: "\e966"; }
-.ico--thumbs-down:before { content: "\e93d"; }
-.ico--thumbs-up:before { content: "\e93e"; }
-.ico--anchor:before { content: "\e92d"; }
-.ico--paw:before { content: "\e90b"; }
-.ico--dots-three-vertical:before { content: "\e940"; }
-.ico--dots-three-horizontal:before { content: "\e941"; }
-.ico--log-out:before { content: "\e942"; }
-.ico--envelope:before { content: "\e908"; }
-.ico--pin:before { content: "\e943"; }
-.ico--at:before { content: "\e905"; }
-.ico--strategy:before { content: "\e932"; }
-.ico--pig:before { content: "\e928"; }
-.ico--thermometer:before { content: "\e90a"; }
-.ico--menu:before { content: "\e933"; }
-.ico--chevron-right:before { content: "\e923"; }
-.ico--chevron-left:before { content: "\e924"; }
-.ico--chevron-down:before { content: "\e925"; }
-.ico--chevron-up:before { content: "\e926"; }
-.ico--link-horizontal:before { content: "\e910"; }
-.ico--beer:before { content: "\e909"; }
-.ico--pirati:before { content: "\e90d"; }
-.ico--jitsi:before { content: "\e90f"; }
-.ico--open-source:before { content: "\e90e"; }
+.ico--glass:before { content: "\e967"; }
 .ico--checkmark:before { content: "\e965"; }
 .ico--info:before { content: "\e901"; }
 .ico--question:before { content: "\e904"; }
@@ -128,4 +105,32 @@
 .ico--location:before { content: "\e906"; }
 .ico--phone:before { content: "\e907"; }
 .ico--linkedin:before { content: "\e903"; }
-.ico--facebook:before { content: "\e902"; }
+.ico--facebook:before { content: "\e902"; }
\ No newline at end of file
+.ico--food:before { content: "\e968"; }
+.ico--dots-three-vertical:before { content: "\e940"; }
+.ico--dots-three-horizontal:before { content: "\e941"; }
+.ico--log-out:before { content: "\e942"; }
+.ico--envelope:before { content: "\e908"; }
+.ico--pin:before { content: "\e943"; }
+.ico--at:before { content: "\e905"; }
+.ico--bed:before { content: "\e969"; }
+.ico--train:before { content: "\e96a"; }
+.ico--bus:before { content: "\e96b"; }
+.ico--wheelchair:before { content: "\e966"; }
+.ico--thumbs-down:before { content: "\e93d"; }
+.ico--thumbs-up:before { content: "\e93e"; }
+.ico--anchor:before { content: "\e92d"; }
+.ico--paw:before { content: "\e90b"; }
+.ico--strategy:before { content: "\e932"; }
+.ico--pig:before { content: "\e928"; }
+.ico--thermometer:before { content: "\e90a"; }
+.ico--menu:before { content: "\e933"; }
+.ico--chevron-right:before { content: "\e923"; }
+.ico--chevron-left:before { content: "\e924"; }
+.ico--chevron-down:before { content: "\e925"; }
+.ico--chevron-up:before { content: "\e926"; }
+.ico--link-horizontal:before { content: "\e910"; }
+.ico--beer:before { content: "\e909"; }
+.ico--pirati:before { content: "\e90d"; }
+.ico--jitsi:before { content: "\e90f"; }
+.ico--open-source:before { content: "\e90e"; }
\ No newline at end of file

source/icons/demo-files/demo.css

@@ -147,19 +147,19 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 28px;
+  font-size: 32px;
 }
 .fs2 {
   font-size: 20px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 28px;
 }
 .fs4 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs5 {
-  font-size: 32px;
+  font-size: 24px;
 }
 .fs6 {
   font-size: 32px;

source/icons/fonts/pirati-ui.svg

@@ -110,4 +110,9 @@
 <glyph unicode="&#xe964;" glyph-name="cloud-download" d="M891.004 599.94c-3.242 128.698-108.458 232.060-237.862 232.060-75.792 0-143.266-35.494-186.854-90.732-24.442 31.598-62.69 51.96-105.708 51.96-73.81 0-133.642-59.876-133.642-133.722 0-6.436 0.48-12.76 1.364-18.954-11.222 2.024-22.766 3.138-34.57 3.138-106.998 0.002-193.732-86.786-193.732-193.842 0-107.062 86.734-193.848 193.73-193.848h91.76l226.51-234.51 226.51 234.51 111.482 0.012c96.138 0.184 174.008 78.21 174.008 174.446 0 82.090-56.678 150.9-132.996 169.482zM512 128l-192 192h128v192h128v-192h128l-192-192z" />
 <glyph unicode="&#xe965;" glyph-name="checkmark" d="M864 832l-480-480-224 224-160-160 384-384 640 640z" />
 <glyph unicode="&#xe966;" glyph-name="wheelchair" horiz-adv-x="931" d="M584.571 272.571l58.286-116.571c-44-136-170.857-229.143-313.714-229.143-181.143 0-329.143 148-329.143 329.143 0 138.286 86.857 261.714 216.571 309.143l9.714-74.857c-93.143-41.143-153.143-132.571-153.143-234.286 0-141.143 114.857-256 256-256 146.857 0 265.714 125.714 255.429 272.571zM897.714 215.428l33.143-65.143-146.286-73.143c-5.143-2.857-10.857-4-16.571-4-13.714 0-26.857 8-32.571 20l-136.571 272.571h-269.714c-18.286 0-34.286 14.286-36.571 32.571l-54.857 445.143c-0.571 5.714 1.714 18.286 3.429 24 10.857 39.429 47.429 65.143 88 65.143 50.286 0 91.429-41.143 91.429-91.429 0-52-45.714-96.571-98.286-90.857l21.143-165.143h241.714v-73.143h-232.571l9.143-73.143h260c13.714 0 26.857-8 32.571-20l130.286-260z" />
+<glyph unicode="&#xe967;" glyph-name="glass" d="M889.162 780.23c7.568 9.632 8.972 22.742 3.62 33.758-5.356 11.018-16.532 18.012-28.782 18.012h-704c-12.25 0-23.426-6.994-28.78-18.012-5.356-11.018-3.95-24.126 3.618-33.758l313.162-398.57v-381.66h-96c-17.672 0-32-14.326-32-32s14.328-32 32-32h320c17.674 0 32 14.326 32 32s-14.326 32-32 32h-96v381.66l313.162 398.57zM798.162 768l-100.572-128h-371.18l-100.57 128h572.322z" />
+<glyph unicode="&#xe968;" glyph-name="food" d="M921.6 409.6v-358.4c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4v0 256h-102.4v512c0 84.831 68.769 153.6 153.6 153.6v0h153.6v-563.2zM204.8 460.8c-56.554 0-102.4 45.846-102.4 102.4v0 358.4c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v0-204.8h51.2v204.8c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v0-204.8h51.2v204.8c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v0-358.4c0-56.554-45.846-102.4-102.4-102.4v0-409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4v0 409.6z" />
+<glyph unicode="&#xe969;" glyph-name="bed" horiz-adv-x="1170" d="M146.286 365.714h987.429c20 0 36.571-16.571 36.571-36.571v-256h-146.286v146.286h-877.714v-146.286h-146.286v694.857c0 20 16.571 36.571 36.571 36.571h73.143c20 0 36.571-16.571 36.571-36.571v-402.286zM475.429 548.571c0 80.571-65.714 146.286-146.286 146.286s-146.286-65.714-146.286-146.286 65.714-146.286 146.286-146.286 146.286 65.714 146.286 146.286zM1170.286 402.286v36.571c0 121.143-98.286 219.429-219.429 219.429h-402.286c-20 0-36.571-16.571-36.571-36.571v-219.429h658.286z" />
+<glyph unicode="&#xe96a;" glyph-name="train" horiz-adv-x="878" d="M621.714 950.857c141.143 0 256-81.714 256-182.857v-512c0-98.857-109.143-178.857-246.286-182.286l121.714-115.429c12-11.429 4-31.429-12.571-31.429h-603.429c-16.571 0-24.571 20-12.571 31.429l121.714 115.429c-137.143 3.429-246.286 83.429-246.286 182.286v512c0 101.143 114.857 182.857 256 182.857h365.714zM438.857 182.857c60.571 0 109.714 49.143 109.714 109.714s-49.143 109.714-109.714 109.714-109.714-49.143-109.714-109.714 49.143-109.714 109.714-109.714zM768 512v292.571h-658.286v-292.571h658.286z" />
+<glyph unicode="&#xe96b;" glyph-name="bus" horiz-adv-x="878" d="M219.429 256c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM804.571 256c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM778.286 482.286l-41.143 219.429c-3.429 17.143-18.286 29.714-36 29.714h-524.571c-17.714 0-32.571-12.571-36-29.714l-41.143-219.429c-4-22.857 13.143-43.429 36-43.429h606.857c22.857 0 40 20.571 36 43.429zM649.143 832c0 15.429-12 27.429-27.429 27.429h-365.714c-14.857 0-27.429-12-27.429-27.429s12.571-27.429 27.429-27.429h365.714c15.429 0 27.429 12 27.429 27.429zM877.714 417.714v-344.571h-73.143v-73.143c0-40.571-32.571-73.143-73.143-73.143s-73.143 32.571-73.143 73.143v73.143h-438.857v-73.143c0-40.571-32.571-73.143-73.143-73.143s-73.143 32.571-73.143 73.143v73.143h-73.143v344.571c0 46.857 4 81.714 14.286 127.429l58.857 259.429c10.857 91.429 170.857 146.286 365.714 146.286s354.857-54.857 365.714-146.286l60-259.429c10.286-45.714 13.143-80.571 13.143-127.429z" />
 </font></defs></svg>
\ No newline at end of file

source/icons/style.css

 @font-face {
   font-family: 'pirati-ui';
-  src:  url('fonts/pirati-ui.eot?urfwqh');
-  src:  url('fonts/pirati-ui.eot?urfwqh#iefix') format('embedded-opentype'),
-    url('fonts/pirati-ui.ttf?urfwqh') format('truetype'),
-    url('fonts/pirati-ui.woff?urfwqh') format('woff'),
-    url('fonts/pirati-ui.svg?urfwqh#pirati-ui') format('svg');
+  src:  url('fonts/pirati-ui.eot?7u2aox');
+  src:  url('fonts/pirati-ui.eot?7u2aox#iefix') format('embedded-opentype'),
+    url('fonts/pirati-ui.ttf?7u2aox') format('truetype'),
+    url('fonts/pirati-ui.woff?7u2aox') format('woff'),
+    url('fonts/pirati-ui.svg?7u2aox#pirati-ui') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,77 +25,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.ico--wheelchair:before {
-  content: "\e966";
-}
-.ico--thumbs-down:before {
-  content: "\e93d";
-}
-.ico--thumbs-up:before {
-  content: "\e93e";
-}
-.ico--anchor:before {
-  content: "\e92d";
-}
-.ico--paw:before {
-  content: "\e90b";
-}
-.ico--dots-three-vertical:before {
-  content: "\e940";
-}
-.ico--dots-three-horizontal:before {
-  content: "\e941";
-}
-.ico--log-out:before {
-  content: "\e942";
-}
-.ico--envelope:before {
-  content: "\e908";
-}
-.ico--pin:before {
-  content: "\e943";
-}
-.ico--at:before {
-  content: "\e905";
-}
-.ico--strategy:before {
-  content: "\e932";
-}
-.ico--pig:before {
-  content: "\e928";
-}
-.ico--thermometer:before {
-  content: "\e90a";
-}
-.ico--menu:before {
-  content: "\e933";
-}
-.ico--chevron-right:before {
-  content: "\e923";
-}
-.ico--chevron-left:before {
-  content: "\e924";
-}
-.ico--chevron-down:before {
-  content: "\e925";
-}
-.ico--chevron-up:before {
-  content: "\e926";
-}
-.ico--link-horizontal:before {
-  content: "\e910";
-}
-.ico--beer:before {
-  content: "\e909";
-}
-.ico--pirati:before {
-  content: "\e90d";
-}
-.ico--jitsi:before {
-  content: "\e90f";
-}
-.ico--open-source:before {
-  content: "\e90e";
+.ico--glass:before {
+  content: "\e967";
 }
 .ico--checkmark:before {
   content: "\e965";
@@ -334,3 +265,87 @@
 .ico--facebook:before {
   content: "\e902";
 }
+.ico--food:before {
+  content: "\e968";
+}
+.ico--dots-three-vertical:before {
+  content: "\e940";
+}
+.ico--dots-three-horizontal:before {
+  content: "\e941";
+}
+.ico--log-out:before {
+  content: "\e942";
+}
+.ico--envelope:before {
+  content: "\e908";
+}
+.ico--pin:before {
+  content: "\e943";
+}
+.ico--at:before {
+  content: "\e905";
+}
+.ico--bed:before {
+  content: "\e969";
+}
+.ico--train:before {
+  content: "\e96a";
+}
+.ico--bus:before {
+  content: "\e96b";
+}
+.ico--wheelchair:before {
+  content: "\e966";
+}
+.ico--thumbs-down:before {
+  content: "\e93d";
+}
+.ico--thumbs-up:before {
+  content: "\e93e";
+}
+.ico--anchor:before {
+  content: "\e92d";
+}
+.ico--paw:before {
+  content: "\e90b";
+}
+.ico--strategy:before {
+  content: "\e932";
+}
+.ico--pig:before {
+  content: "\e928";
+}
+.ico--thermometer:before {
+  content: "\e90a";
+}
+.ico--menu:before {
+  content: "\e933";
+}
+.ico--chevron-right:before {
+  content: "\e923";
+}
+.ico--chevron-left:before {
+  content: "\e924";
+}
+.ico--chevron-down:before {
+  content: "\e925";
+}
+.ico--chevron-up:before {
+  content: "\e926";
+}
+.ico--link-horizontal:before {
+  content: "\e910";
+}
+.ico--beer:before {
+  content: "\e909";
+}
+.ico--pirati:before {
+  content: "\e90d";
+}
+.ico--jitsi:before {
+  content: "\e90f";
+}
+.ico--open-source:before {
+  content: "\e90e";
+}

source/icons/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?urfwqh');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?urfwqh#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?urfwqh') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?urfwqh') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?urfwqh##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?7u2aox');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?7u2aox#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?7u2aox') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?7u2aox') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?7u2aox##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,124 +27,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.ico--wheelchair {
-  &:before {
-    content: $ico--wheelchair; 
-  }
-}
-.ico--thumbs-down {
-  &:before {
-    content: $ico--thumbs-down; 
-  }
-}
-.ico--thumbs-up {
-  &:before {
-    content: $ico--thumbs-up; 
-  }
-}
-.ico--anchor {
+.ico--glass {
   &:before {
-    content: $ico--anchor; 
-  }
-}
-.ico--paw {
-  &:before {
-    content: $ico--paw; 
-  }
-}
-.ico--dots-three-vertical {
-  &:before {
-    content: $ico--dots-three-vertical; 
-  }
-}
-.ico--dots-three-horizontal {
-  &:before {
-    content: $ico--dots-three-horizontal; 
-  }
-}
-.ico--log-out {
-  &:before {
-    content: $ico--log-out; 
-  }
-}
-.ico--envelope {
-  &:before {
-    content: $ico--envelope; 
-  }
-}
-.ico--pin {
-  &:before {
-    content: $ico--pin; 
-  }
-}
-.ico--at {
-  &:before {
-    content: $ico--at; 
-  }
-}
-.ico--strategy {
-  &:before {
-    content: $ico--strategy; 
-  }
-}
-.ico--pig {
-  &:before {
-    content: $ico--pig; 
-  }
-}
-.ico--thermometer {
-  &:before {
-    content: $ico--thermometer; 
-  }
-}
-.ico--menu {
-  &:before {
-    content: $ico--menu; 
-  }
-}
-.ico--chevron-right {
-  &:before {
-    content: $ico--chevron-right; 
-  }
-}
-.ico--chevron-left {
-  &:before {
-    content: $ico--chevron-left; 
-  }
-}
-.ico--chevron-down {
-  &:before {
-    content: $ico--chevron-down; 
-  }
-}
-.ico--chevron-up {
-  &:before {
-    content: $ico--chevron-up; 
-  }
-}
-.ico--link-horizontal {
-  &:before {
-    content: $ico--link-horizontal; 
-  }
-}
-.ico--beer {
-  &:before {
-    content: $ico--beer; 
-  }
-}
-.ico--pirati {
-  &:before {
-    content: $ico--pirati; 
-  }
-}
-.ico--jitsi {
-  &:before {
-    content: $ico--jitsi; 
-  }
-}
-.ico--open-source {
-  &:before {
-    content: $ico--open-source; 
+    content: $ico--glass; 
   }
 }
 .ico--checkmark {
@@ -542,4 +427,144 @@
     content: $ico--facebook; 
   }
 }
+.ico--food {
+  &:before {
+    content: $ico--food; 
+  }
+}
+.ico--dots-three-vertical {
+  &:before {
+    content: $ico--dots-three-vertical; 
+  }
+}
+.ico--dots-three-horizontal {
+  &:before {
+    content: $ico--dots-three-horizontal; 
+  }
+}
+.ico--log-out {
+  &:before {
+    content: $ico--log-out; 
+  }
+}
+.ico--envelope {
+  &:before {
+    content: $ico--envelope; 
+  }
+}
+.ico--pin {
+  &:before {
+    content: $ico--pin; 
+  }
+}
+.ico--at {
+  &:before {
+    content: $ico--at; 
+  }
+}
+.ico--bed {
+  &:before {
+    content: $ico--bed; 
+  }
+}
+.ico--train {
+  &:before {
+    content: $ico--train; 
+  }
+}
+.ico--bus {
+  &:before {
+    content: $ico--bus; 
+  }
+}
+.ico--wheelchair {
+  &:before {
+    content: $ico--wheelchair; 
+  }
+}
+.ico--thumbs-down {
+  &:before {
+    content: $ico--thumbs-down; 
+  }
+}
+.ico--thumbs-up {
+  &:before {
+    content: $ico--thumbs-up; 
+  }
+}
+.ico--anchor {
+  &:before {
+    content: $ico--anchor; 
+  }
+}
+.ico--paw {
+  &:before {
+    content: $ico--paw; 
+  }
+}
+.ico--strategy {
+  &:before {
+    content: $ico--strategy; 
+  }
+}
+.ico--pig {
+  &:before {
+    content: $ico--pig; 
+  }
+}
+.ico--thermometer {
+  &:before {
+    content: $ico--thermometer; 
+  }
+}
+.ico--menu {
+  &:before {
+    content: $ico--menu; 
+  }
+}
+.ico--chevron-right {
+  &:before {
+    content: $ico--chevron-right; 
+  }
+}
+.ico--chevron-left {
+  &:before {
+    content: $ico--chevron-left; 
+  }
+}
+.ico--chevron-down {
+  &:before {
+    content: $ico--chevron-down; 
+  }
+}
+.ico--chevron-up {
+  &:before {
+    content: $ico--chevron-up; 
+  }
+}
+.ico--link-horizontal {
+  &:before {
+    content: $ico--link-horizontal; 
+  }
+}
+.ico--beer {
+  &:before {
+    content: $ico--beer; 
+  }
+}
+.ico--pirati {
+  &:before {
+    content: $ico--pirati; 
+  }
+}
+.ico--jitsi {
+  &:before {
+    content: $ico--jitsi; 
+  }
+}
+.ico--open-source {
+  &:before {
+    content: $ico--open-source; 
+  }
+}
 

source/icons/variables.scss

 $icomoon-font-family: "pirati-ui" !default;
 $icomoon-font-path: "fonts" !default;
 
-$ico--wheelchair: "\e966";
-$ico--thumbs-down: "\e93d";
-$ico--thumbs-up: "\e93e";
-$ico--anchor: "\e92d";
-$ico--paw: "\e90b";
-$ico--dots-three-vertical: "\e940";
-$ico--dots-three-horizontal: "\e941";
-$ico--log-out: "\e942";
-$ico--envelope: "\e908";
-$ico--pin: "\e943";
-$ico--at: "\e905";
-$ico--strategy: "\e932";
-$ico--pig: "\e928";
-$ico--thermometer: "\e90a";
-$ico--menu: "\e933";
-$ico--chevron-right: "\e923";
-$ico--chevron-left: "\e924";
-$ico--chevron-down: "\e925";
-$ico--chevron-up: "\e926";
-$ico--link-horizontal: "\e910";
-$ico--beer: "\e909";
-$ico--pirati: "\e90d";
-$ico--jitsi: "\e90f";
-$ico--open-source: "\e90e";
+$ico--glass: "\e967";
 $ico--checkmark: "\e965";
 $ico--info: "\e901";
 $ico--question: "\e904";
@@ -104,4 +81,32 @@ $ico--location: "\e906";
 $ico--phone: "\e907";
 $ico--linkedin: "\e903";
 $ico--facebook: "\e902";
+$ico--food: "\e968";
+$ico--dots-three-vertical: "\e940";
+$ico--dots-three-horizontal: "\e941";
+$ico--log-out: "\e942";
+$ico--envelope: "\e908";
+$ico--pin: "\e943";
+$ico--at: "\e905";
+$ico--bed: "\e969";
+$ico--train: "\e96a";
+$ico--bus: "\e96b";
+$ico--wheelchair: "\e966";
+$ico--thumbs-down: "\e93d";
+$ico--thumbs-up: "\e93e";
+$ico--anchor: "\e92d";
+$ico--paw: "\e90b";
+$ico--strategy: "\e932";
+$ico--pig: "\e928";
+$ico--thermometer: "\e90a";
+$ico--menu: "\e933";
+$ico--chevron-right: "\e923";
+$ico--chevron-left: "\e924";
+$ico--chevron-down: "\e925";
+$ico--chevron-up: "\e926";
+$ico--link-horizontal: "\e910";
+$ico--beer: "\e909";
+$ico--pirati: "\e90d";
+$ico--jitsi: "\e90f";
+$ico--open-source: "\e90e";