p
  | Icons are single-element, responsive and pure CSS icons.
  | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.

+docs-subheading('icons-navigation', 'Navigation icons')

.columns
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-arrow-up
    p icon-arrow-up
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-arrow-right
    p icon-arrow-right
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-arrow-down
    p icon-arrow-down
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-arrow-left
    p icon-arrow-left
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-upward
    p icon-upward
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-forward
    p icon-forward
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-downward
    p icon-downward
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-back
    p icon-back
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-caret
    p icon-caret
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-menu
    p icon-menu
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-apps
    p icon-apps
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-more-horiz
    p icon-more-horiz
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-more-vert
    p icon-more-vert

+docs-subheading('icons-action', 'Action icons')

.columns
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-resize-horiz
    p icon-resize-horiz
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-resize-vert
    p icon-resize-vert
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-plus
    p icon-plus
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-minus
    p icon-minus
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-cross
    p icon-cross
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-check
    p icon-check
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-stop
    p icon-stop
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-shutdown
    p icon-shutdown
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-refresh
    p icon-refresh
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-search
    p icon-search
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-flag
    p icon-flag
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-bookmark
    p icon-bookmark
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-edit
    p icon-edit
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-delete
    p icon-delete
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-share
    p icon-share
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-download
    p icon-download
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-upload
    p icon-upload

+docs-subheading('icons-object', 'Object icons')

.columns
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-mail
    p icon-mail
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-people
    p icon-people
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-message
    p icon-message
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-photo
    p icon-photo
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-time
    p icon-time
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-location
    p icon-location
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-link
    p icon-link
  .column.col-3.col-md-6
    button.btn.btn-primary.btn-action.btn-lg
      i.icon.icon-emoji
    p icon-emoji

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

+docs-subheading('icons-sizes', 'Icon sizes')

p
  | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
  | You can set #[code font-size] to have different icon sizes.

.columns
  .column.col-3.col-md-6
    p
      i.icon.icon-2x.icon-mail
    p icon-2x (32px)
  .column.col-3.col-md-6
    p
      i.icon.icon-3x.icon-mail
    p icon-3x (48px)
  .column.col-3.col-md-6
    p
      i.icon.icon-4x.icon-mail
    p icon-4x (64px)

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      