---
layout : 'default'
css    : 'icon'

title  : 'Icon'
type   : 'UI Element'
---
<div class="segment">
  <div class="container">
  <h1>Icon</h1>
  <p>An icon is a glyph used to represent another concept more succinctly.</p>
  </div>
</div>
<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>

  <h2>Standard</h2>


    <h4>Icon Set</h4>
    <p>Icon sets contain an arbitrary set of icons that represent concepts a website might reference</p>
    <div class="ui ignored warning message">
      Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
    </div>

  <div class="icon example">
    <h4>Content</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon attachment"></i> Attachment</div>
      <div class="column"><i class="icon barcode"></i> Barcode</div>
      <div class="column"><i class="icon bookmark"></i> Bookmark</div>
      <div class="column"><i class="icon cart"></i> Cart</div>
      <div class="column"><i class="icon chart"></i> Chart</div>
      <div class="column"><i class="icon bar chart"></i> Bar chart</div>
      <div class="column"><i class="icon pie chart"></i> Pie chart</div>
      <div class="column"><i class="icon date"></i> Date</div>
      <div class="column"><i class="icon doc"></i> Doc</div>
      <div class="column"><i class="icon docs"></i> Docs</div>
      <div class="column"><i class="icon email"></i> Email</div>
      <div class="column"><i class="icon folder"></i> Folder</div>
      <div class="column"><i class="icon open folder"></i> Open folder</div>
      <div class="column"><i class="icon home"></i> Home</div>
      <div class="column"><i class="icon mail"></i> Mail</div>
      <div class="column"><i class="icon photo"></i> Photo</div>
      <div class="column"><i class="icon photos"></i> Photos</div>
      <div class="column"><i class="icon search"></i> Search</div>
      <div class="column"><i class="icon setting"></i> Setting</div>
      <div class="column"><i class="icon settings"></i> Settings</div>
      <div class="column"><i class="icon tag"></i> Tag</div>
      <div class="column"><i class="icon tags"></i> Tags</div>
      <div class="column"><i class="icon time"></i> Time</div>
      <div class="column"><i class="icon top list"></i> Top list</div>
      <div class="column"><i class="icon trash"></i> Trash</div>
      <div class="column"><i class="icon community"></i> Community</div>
      <div class="column"><i class="icon user"></i> User</div>
      <div class="column"><i class="icon users"></i> Users</div>
      <div class="column"><i class="icon chat"></i> Chat</div>
    </div>
  </div>
  <div class="icon example">
    <h4>Special Content</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon trophy"></i> Trophy</div>
      <div class="column"><i class="icon cloud"></i> Cloud</div>
      <div class="column"><i class="icon flight"></i> Flight</div>
      <div class="column"><i class="icon gift"></i> Gift</div>
      <div class="column"><i class="icon dollar"></i> Dollar</div>
      <div class="column"><i class="icon lab"></i> Lab</div>
      <div class="column"><i class="icon rss"></i> RSS</div>
    </div>
  </div>
  
  <div class="another icon example">
    <h4>User Actions</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon add user"></i> Add User</div>
      <div class="column"><i class="icon block"></i> Block</div>
      <div class="column"><i class="icon hide"></i> Hide</div>
      <div class="column"><i class="icon unhide"></i> Unhide</div>
      <div class="column"><i class="icon lock"></i> Lock</div>
      <div class="column"><i class="icon unlock"></i> Unlock</div>
      <div class="column"><i class="icon flag"></i> Flag</div>
      <div class="column"><i class="icon cancel"></i> Cancel</div>
      <div class="column"><i class="icon close"></i> Close</div>
      <div class="column"><i class="icon close"></i> Delete</div>
      <div class="column"><i class="icon check"></i> Check</div>
      <div class="column"><i class="icon edit"></i> Edit</div>
      <div class="column"><i class="icon open link"></i> Open Link</div>
      <div class="column"><i class="icon export"></i> Export</div>
      <div class="column"><i class="icon forward"></i> Forward</div>
      <div class="column"><i class="icon upload"></i> Upload</div>
      <div class="column"><i class="icon like"></i> Like</div>
      <div class="column"><i class="icon dislike"></i> Dislike</div>
      <div class="column"><i class="icon pin"></i> Pin</div>
      <div class="column"><i class="icon star"></i> Star</div>
      <div class="column"><i class="icon empty star"></i> Empty Star</div>
      <div class="column"><i class="icon half star"></i> Half Star</div>
      <div class="column"><i class="icon print"></i> Print</div>
      <div class="column"><i class="icon comment"></i> Comment</div>
    </div>
  </div>
  
  <div class="another icon example">
    <h4>View</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon content"></i> Content</div>
      <div class="column"><i class="icon grid layout"></i> Grid Layout</div>
      <div class="column"><i class="icon block layout"></i> Block Layout</div>
      <div class="column"><i class="icon list layout"></i> List Layout</div>>
      <div class="column"><i class="icon resize full"></i> Resize Full</div>
      <div class="column"><i class="icon resize horizontal"></i> Resize Horizontal</div>
      <div class="column"><i class="icon resize small"></i> Resize Small</div>
      <div class="column"><i class="icon resize vertical"></i> Resize Vertical</div>
      <div class="column"><i class="icon zoom in"></i> Zoom in</div>
      <div class="column"><i class="icon zoom out"></i> Zoom out</div>
    </div>
  </div>
  <div class="another icon example">
    <h4>Media Actions</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon eject"></i> Eject</div>
      <div class="column"><i class="icon fast-forward"></i> Fast-forward</div>
      <div class="column"><i class="icon pause"></i> Pause</div>
      <div class="column"><i class="icon play"></i> Play</div>
      <div class="column"><i class="icon to-end"></i> To-start</div>
      <div class="column"><i class="icon to-start"></i> To-end</div>
      <div class="column"><i class="icon forward"></i> Forward</div>
      <div class="column"><i class="icon shuffle"></i> Shuffle</div>
      <div class="column"><i class="icon clockwise"></i> Clockwise</div>
      <div class="column"><i class="icon counter clockwise"></i> Counter clockwise</div>
    </div>
  </div>
  <div class="another icon example">
    <h4>Objects</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon book"></i> Book</div>
      <div class="column"><i class="icon calendar"></i> Calendar</div>
      <div class="column"><i class="icon color"></i> Color</div>
      <div class="column"><i class="icon desk globe"></i> Desk globe</div>
      <div class="column"><i class="icon fire"></i> Fire</div>
      <div class="column"><i class="icon globe"></i> Globe</div>
      <div class="column"><i class="icon headphones"></i> Headphones</div>
      <div class="column"><i class="icon id"></i> Id</div>
      <div class="column"><i class="icon idea"></i> Idea</div>
      <div class="column"><i class="icon lightning"></i> Lightning</div>
      <div class="column"><i class="icon money"></i> Money</div>
      <div class="column"><i class="icon paint"></i> Paint</div>
    </div>
  </div>
  
  
  <div class="another icon example">
    <h4>Indications</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon cancel circle"></i> Cancel circle</div>
      <div class="column"><i class="icon asterisk"></i> Asterisk</div>
      <div class="column"><i class="icon attention circle"></i> Attention circle</div>
      <div class="column"><i class="icon attention"></i> Attention</div>
      <div class="column"><i class="icon empty heart"></i> Empty heart</div>
      <div class="column"><i class="icon heart"></i> Heart</div>
      <div class="column"><i class="icon thumbs down"></i> Thumbs down</div>
      <div class="column"><i class="icon thumbs up"></i> Thumbs up</div>
      <div class="column"><i class="icon terminal"></i> Terminal</div>
      <div class="column"><i class="icon direction"></i> Direction</div>
      
      <div class="column"><i class="icon location"></i> Location</div>
      <div class="column"><i class="icon help"></i> Help</div>
      <div class="column"><i class="icon info"></i> Info</div>
      <div class="column"><i class="icon mic"></i> Mic</div>
      <div class="column"><i class="icon off"></i> Off</div>
      
      <div class="column"><i class="icon add"></i> Add</div>
    </div>
  </div>
  
  <div class="another icon example">
    <h4>Symbols</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon left arrow"></i> Left open</div>
      <div class="column"><i class="icon left triangle"></i> Left triangle</div>
      <div class="column"><i class="icon left"></i> Left</div>
      <div class="column"><i class="icon right"></i> Right</div>
      <div class="column"><i class="icon right triangle"></i> Right triangle</div>
      <div class="column"><i class="icon right arrow"></i> Right arrow</div>
      <div class="column"><i class="icon up"></i> Up</div>
      <div class="column"><i class="icon up triangle"></i> Up triangle</div>
      <div class="column"><i class="icon up arrow"></i> Up arrow</div>
      <div class="column"><i class="icon down arrow"></i> Down arrow</div>
      <div class="column"><i class="icon down triangle"></i> Down triangle</div>
      <div class="column"><i class="icon down"></i> Down arrow</div>
      <div class="column"><i class="icon square"></i> Square</div>
      <div class="column"><i class="icon minus"></i> Minus</div>
      <div class="column"><i class="icon plus"></i> Plus</div>
    </div>
  </div>
  
  <div class="another icon example">
    <h4>Social</h4>
    <div class="ui eight column grid">
      <div class="column"><i class="icon facebook"></i> Facebook</div>
      <div class="column"><i class="icon twitter"></i> Twitter</div>
      <div class="column"><i class="icon github"></i> Github</div>
    </div>
  </div>

  <h2>States</h2>

  <div class="example">
    <h4>Disabled</h4>
    <p>An icon can show that it is disabled</p>
    <i class="disabled users icon"></i>
  </div>

  <h2>Variations</h2>
  
  <div class="example">
    <h4>Size</h4>
    <p>An icon can vary in size</p>
    <i class="small users icon"></i> Users
    <br>
    <i class="users icon"></i> Users
    <br>
    <i class="large users icon"></i> Users
    <br>
    <i class="huge users icon"></i> Users
    <br>
    <i class="massive users icon"></i> Users
    
  </div>
  <div class="example">
    <h4>Emphasized</h4>
    <p>An icon can be formatted to show emphasis</p>
    <i class="emphasized users icon"></i>
  </div>
  
  <div class="example">
    <h4>Colors</h4>
    <p>An icon can be formatted with different colors</p>
    <i class="black users icon"></i>
    <i class="blue user icon"></i>
    <i class="red community icon"></i>
    <i class="green add user icon"></i>
    <i class="purple chat icon"></i>
    <i class="teal comment icon"></i>
  </div>
  
  <div class="example">
    <h4>Inverted</h4>
    <p>an icon can have its colors inverted for contrast</p>
    <i class="inverted black users icon"></i>
    <i class="inverted blue user icon"></i>
    <i class="inverted red community icon"></i>
    <i class="inverted green add user icon"></i>
    <i class="inverted purple chat icon"></i>
    <i class="inverted teal comment icon"></i>
  </div>


</div>