content: import React from 'react';
  
  
  export default () => {
      return (
          <div className="icons-demo">
  
              <h1>Icons</h1>
              <p>
                  When you use an icon, consider where and how it is currently used elsewhere
                  in the Timelog suite of applications, and make sure that the meaning you
                  prescribe to it is the same or at least similar. Don't repurpose an
                  established icon for a different action.
              </p>
  
              <div className="separator-block"></div>
  
              <h2>Icon sizes</h2>
  
              <div className="row">
                  <div className="gr-1"><i className="im icon-user icon--xxs"></i></div>
                  <div className="gr-1"><i className="im icon-user icon--xs"></i></div>
                  <div className="gr-1"><i className="im icon-user icon--s"></i></div>
                  <div className="gr-1"><i className="im icon-user icon--m"></i></div>
                  <div className="gr-2"><i className="im icon-user icon--l"></i></div>
                  <div className="gr-3"><i className="im icon-user icon--xl"></i></div>
                  <div className="gr-4"><i className="im icon-user icon--xxl"></i></div>
                  <div className="gr-5"><i className="im icon-user icon--xxxl"></i></div>
              </div>
              <div className="row">
                  <div className="gr-1">icon--xxs</div>
                  <div className="gr-1">icon--xs</div>
                  <div className="gr-1">icon--s</div>
                  <div className="gr-1">icon--m</div>
                  <div className="gr-2">icon--l</div>
                  <div className="gr-3">icon--xl</div>
                  <div className="gr-4">icon--xxl</div>
                  <div className="gr-5">icon--xxxl</div>
              </div>
  
              <div className="separator-block"></div>
  
              <h2>Rosemary icons</h2>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-calendar-from"></i>
                      <span>icon-calendar-from</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-calendar-to"></i>
                      <span>icon-calendar-to</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-drag"></i>
                      <span>icon-drag</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-arrow-thin-down"></i>
                      <span>icon-arrow-thin-down</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-thin-left"></i>
                      <span>icon-arrow-thin-left</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-thin-right"></i>
                      <span>icon-arrow-thin-right</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-arrow-thin-up"></i>
                      <span>icon-arrow-thin-up</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-go-down"></i>
                      <span>icon-arrow-go-down</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-go-up"></i>
                      <span>icon-arrow-go-up</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-arrow-down"></i>
                      <span>icon-arrow-down</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-up"></i>
                      <span>icon-arrow-up</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-left"></i>
                      <span>icon-arrow-left</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-arrow-right"></i>
                      <span>icon-arrow-right</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-lock"></i>
                      <span>icon-lock</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-blocked-user"></i>
                      <span>icon-blocked-user</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-logo"></i>
                      <span>icon-logo</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-act-as"></i>
                      <span>icon-act-as</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-arrow-right2"></i>
                      <span>icon-arrow-right2</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-arrow-left2"></i>
                      <span>icon-arrow-left2</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-user"></i>
                      <span>icon-user</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-checkmark"></i>
                      <span>icon-checkmark</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-calendar"></i>
                      <span>icon-calendar</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-close-circle"></i>
                      <span>icon-close-circle</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-close"></i>
                      <span>icon-close</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-cog"></i>
                      <span>icon-cog</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-error"></i>
                      <span>icon-error</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-eye-disabled"></i>
                      <span>icon-eye-disabled</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-eye"></i>
                      <span>icon-eye</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-flame"></i>
                      <span>icon-flame</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-info-notify"></i>
                      <span>icon-info-notify</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-info"></i>
                      <span>icon-info</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-cal-vacation"></i>
                      <span>cal-vacation</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-clock"></i>
                      <span>clock</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-notifications"></i>
                      <span>icon-notifications</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-ok"></i>
                      <span>icon-ok</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-search"></i>
                      <span>icon-search</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-warning"></i>
                      <span>icon-warning</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-request"></i>
                      <span>icon-request</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-sick"></i>
                      <span>icon-sick</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-palm"></i>
                      <span>icon-palm</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-plane"></i>
                      <span>icon-plane</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-gift"></i>
                      <span>icon-gift</span>
                  </div>
              </div>
  
              <div className="row">
                  <div className="gr-6">
                      <i className="im icon-calendar-month"></i>
                      <span>icon-calendar-month</span>
                  </div>
                  <div className="gr-6">
                      <i className="im icon-table"></i>
                      <span>icon-table</span>
                  </div>
              </div>
  
              <div className="separator-block"></div>
  
              <h2>Ionicons</h2>
              <p>Here you can find icon names <a href="http://ionicons.com/" target="_blank">Ionicons</a></p>
              <div className="row">
                  <div className="gr-6">
                      <i className="ion ion-ios-trash"></i>
                      <span>ion-ios-trash"</span>
                  </div>
                  <div className="gr-6">
                      <i className="ion ion-printer"></i>
                      <span>ion-printer</span>
                  </div>
                  <div className="gr-6">
                      <i className="ion ion-edit"></i>
                      <span>ion-edit</span>
                  </div>
              </div>
          </div>
  
      );
  };
  
  