--- layout : 'default' css : 'icon' title : 'Icon' description : 'An icon is a glyph used to represent a concept' type : 'UI Element' element : 'icon' elementType : 'element' referencesOthers: true --- <%- @partial('header') %>

Types

Icon Set

An icon sets contains an arbitrary number of glyphs

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.
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.

Web Content

Icons can represent types of content found on websites

Alarm
Alarm Outline
Browser
Bug
Calendar
Calendar Outline
Cloud
Code
Comment
Comment Outline
Comments
Comments Outline
Dashboard
External Link
External Link Square
Feed
History
Home
Idea
Inbox
Lab
Mail
Mail Outline
Mail square
Map
Payment
Privacy
Protect
Search
Setting
Settings
Shop
Sitemap
Tag
Tags
Tasks
Terminal
Ticket
Top
Wifi

User Actions

Icons can represent common actions a user can take

Adjust
Archive
Ban
Bookmark
Call
Call Square
Cloud Download
Cloud Upload
Compress
Configure
Download
Edit
Erase
Exchange
External Share
Expand
Filter
Flag
Flag Outline
Hide
Lock
Mail Forward
Pin
Print
Random
Recycle
Refresh
Remove Bookmark
Repeat
Reply All
Reply
Retweet
Send
Send Outline
Share Alternate
Share Alternate Square
Share
Share Square
Sign in
Sign out
Tint
Translate
Undo
Unhide
Unlock Alternate
Unlock
Upload
Wait
Wizard
Write
Write Square

Message

Icons can alert users to the type of message being displayed

Announcement
Flag
Help
Help Circle
Info
Info Circle
Warning
Warning Circle
Warning Sign

Users

Icons can represent types of people

Child
Doctor
Female
Handicap
Male
Student
User
Users

Layout Adjustment

Icons can alert users to common ways to adjust page layouts

Grid Layout
List Layout
Block Layout
Zoom
Zoom Out
Resize Vertical
Resize Horizontal
Maximize
Crop

Objects

Icons can be used to represent common objects

Anchor
Bar
Bomb
Book
Bullseye
Checkered Flag
Cocktail
Fax
Fire Extinguisher
Fire
Gift
Leaf
Legal
Lemon
Life Ring
Lightning
Magnet
Money
Moon
Plane
Puzzle
Rain
Road
Rocket
Shipping
Suitcase
Sun
Travel
Treatment
World

Shapes

Icons can be used to create shapes

Crosshairs
Asterisk
Certificate
Spinner
Circle
Quote Left
Quote Right
Ellipsis Horizontal
Ellipsis Vertical
Cube
Cubes
Circle Notched
Circle Thin

Item Selection

Icons can show whether an item is included in a set

Add Circle
Add Square
Check Circle
Check Circle Outline
Check Square
Checkmark Box
Checkmark
Minus Circle
Minus
Minus Square
Minus Square Outline
Move
Plus
Plus Square Outline
Radio
Remove Circle
Remove Circle Outline
Remove
Selected Radio

Media

Icons can represent common media types

Bar Chart
Camera Retro
Film
Photo
Sound

Pointers

Icons can be used to indicate a direction

Angle Double Down
Angle Double Left
Angle Double Right
Angle Double Up
Angle Down
Angle Left
Angle Right
Angle Up
Arrow Circle Down
Arrow Circle Left
Arrow Circle Outline Down
Arrow Circle Outline Left
Arrow Circle Outline Right
Arrow Circle Outline Up
Arrow Circle Right
Arrow Circle Up
Arrow Down
Arrow Left
Arrow Right
Arrow Up
Caret Down
Caret Left
Caret Right
Caret Up
Chevron Circle Down
Chevron Circle Left
Chevron Circle Right
Chevron Circle Up
Chevron Down
Chevron Left
Chevron Right
Chevron Up
Long Arrow Down
Long Arrow Left
Long Arrow Right
Long Arrow Up
Pointing Down
Pointing Left
Pointing Right
Pointing Up
Toggle Down
Toggle Left
Toggle Right
Toggle Up

Computer and File System

Icons can represent elements of a computer and its file system

Desktop
Disk Outline
File Archive Outline
File Audio Outline
File Code Outline
File Excel Outline
File
File Image Outline
File Outline
File Pdf Outline
File Powerpoint Outline
File Text
File Text Outline
File Video Outline
File Word Outline
Folder
Folder Open
Folder Open Outline
Folder Outline
Game
Keyboard
Laptop
Level Down
Level Up
Mobile
Power
Tablet
Trash

Technologies

Icons can represent common technologies

Barcode
Css3
Database
Fork
Html5
Openid
Qrcode
Rss Square

Rating

Icons can be used to represent users attitude towards content

Empty Heart
Empty Star
Frown
Heart
Meh
Smile
Star Half Empty
Star Half
Star
Thumbs Down
Thumbs Outline Down
Thumbs Outline Up
Thumbs Up

Audio

Icons can be used to represent common ways to interact with audio

Backward
Eject
Fast Backward
Fast Forward
Forward
Music
Mute
Pause
Play
Record
Step Backward
Step Forward
Stop
Unmute
Video Play
Video Play Outline
Volume Down
Volume Off
Volume Up

Map

Icons can be used to represent elements on a map

Building
Building Outline
Car
Coffee
Emergency
First Aid
Food
H
Hospital
Location Arrow
Marker
Military
Paw
Space Shuttle
Spoon
Taxi
Tree
University

Tables

Icons can be used to represent common actions inside a table

Columns
Sort Alphabet Ascending
Sort Alphabet Descending
Sort Ascending
Sort Content Ascending
Sort Content Descending
Sort Descending
Sort
Sort Numeric Ascending
Sort Numeric Descending
Table

Text Editor

Icons can represent common actions when editing text

Align Center
Align Justify
Align Left
Align Right
Attach
Bold
Content
Copy
Cut
Font
Header
Indent
Italic
Linkify
List
Ordered List
Outdent
Paragraph
Paste
Save
Strikethrough
Subscript
Superscript
Text Height
Text Width
Underline
Unlink
Unordered List

Currency

Icons can represent units of currency

Dollar
Euro
Lira
Pound
Ruble
Rupee
Won
Yen

Brands

Icons can represent logos to common brands

Adn
Android
Apple
Behance
Behance Square
Bitbucket
Bitbucket Square
Bitcoin
Codepen
Delicious
Deviantart
Digg
Dribbble
Dropbox
Drupal
Empire
Facebook
Facebook Square
Flickr
Foursquare
Git
Git Square
Github Alternate
Github
Github Square
Gittip
Google
Google Plus
Google Plus Square
Hacker News
Instagram
Joomla
Jsfiddle
Linkedin
Linkedin Square
Linux
Maxcdn
Pagelines
Pied Piper Alternate
Pied Piper
Pinterest
Pinterest Square
Qq
Rebel
Reddit
Reddit Square
Renren
Skype
Slack
Soundcloud
Spotify
Stack Exchange
Stack Overflow
Steam
Steam Square
StumbleUpon Circle
StumbleUpon
Tencent Weibo
Trello
Tumblr
Tumblr Square
Twitter
Twitter Square
Vimeo
Vine
Vk
Wechat
Weibo
Windows
Wordpress
Xing
Xing Square
Yahoo
YouTube
YouTube Play
YouTube Square

States

Disabled

An icon can show that it is disabled

Loading

An icon can be used as a simple loader

Variations

Size

An icon can vary in size






Link

An icon can be formatted as a link

Flipped

An icon can be flipped

Rotated

An icon can be rotated

Circular

An icon can be formatted to appear circular

Bordered

In 0.x.x bordered was formally known as squared

An icon can be formatted to appear bordered

Colors

An icon can be formatted with different colors

Inverted

an icon can have its colors inverted for contrast