--- layout : 'default' css : 'icon' title : 'Icon' description : 'An icon is a glyph used to represent another concept more simply' type : 'UI Element' --- <%- @partial('header') %>
Types States Variations

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.
Standard Basic

Standard Icon Set

Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.

Content

Icons can represent types of web content

Archive
Attachment
Browser
Bug
Calendar
Cart
Certificate
Chat
Cloud
Code
Comment
Dashboard
Desktop
Empty Calendar
External URL
External URL Sign
File
File Outline
Folder
Open Folder
Open Folder Outline
Folder Outline
Help
Home
Inbox
Info
Info Letter
Legal
Location
Mail
Mail Outline
Map
Map Marker
Mobile
Music
Chat Outline
Comment Outline
Payment
Photo
QR Code
Question
RSS
RSS Sign
Setting
Settings
Signal
Sitemap
Table
Tablet
Tag
Tags
Tasks
Terminal
Text File
Text File Outline
Time
Trash
URL
User
Users
Video

User Actions

Icons can represent a possible user action

Add
Add Sign
Add Sign Box
Adjust
Empty Bookmark
Bookmark
Cloud Download
Cloud Upload
Collapse
Crop
Download Disk
Download
Edit
Edit sign
Empty Flag
Exchange
Expand
Filter
Flag
Fork Code
Forward
Fullscreen
Hide
Level Down
Level Up
Off
Refresh
Remove Circle
Remove
Remove Sign
Reorder
Reply All
Reply
Retweet
Save
Screenshot
Search
Share
Share Sign
Sign in
Sign out
Tint
Unhide
Upload Disk
Upload

View Actions

Icons can represent actions that modify a page view

Block Layout
Column Layout
Grid
List Layout
Resize Full
Resize Horizontal
Resize Small
Resize Vertical
Sort Alphabet Descending
Sort Alphabet Ascending
Sort Ascending
Sort Attributes Descending
Sort Attributes Ascending
Sort Descending
Sort
Sort Order Descending
Sort Order Ascending
Zoom In
Zoom Out

Text Actions

Icons can represent actions that modify text

Align Center
Align Justify
Align Left
Align Right
Bold
Copy
Cut
Ellipsis Horizontal
Ellipsis Vertical
Font
Indent Left
Indent Right
Italic
List
Move
Ordered List
Paste
Print
Quote left
Quote right
Strikethrough
Subscript
Superscript
Text Height
Text Width
Underline
Undo
Unlink
Unordered List

Media Actions

Icons can represent actions that occur on media

Backward
Eject
Fast Backward
Fast Forward
Mute
Pause
Play Circle
Play
Play Sign
Shuffle
Repeat
Step Backward
Step Forward
Stop
Unmute
Volume Down
Volume Off
Volume Up

Objects

Icons can represent literal objects

Ambulance
Anchor
Barcode
Lab
Beer
Bell Outline
Bolt
Book
Briefcase
Building
Bullhorn
Bullseye
Camera
Camera retro
Coffee
Doctor
Eraser
Female
Fighter Jet
Fire Extinguisher
Fire
Checkered Flag
Food
Gamepad
Gift
Glass
Globe
HDD
Headphones
Hospital
Key
Keyboard
Laptop
Leaf
Lemon
Lightbulb
Magic
Magnet
Male
Medkit
Money
Moon
Pencil
Phone
Phone Sign
Pin
Plane
Puzzle Piece
Road
Rocket
Shield
Stethoscope
Suitcase
Sun
Ticket
Trophy
Truck
Umbrella
Wrench

Status Indication

Icons can indicate the status of something

Ban Circle
Checkmark
Checkmark Sign
Minus Checkbox
Empty Checkbox
Checked Checkbox
Exclamation
attention
Frown
Heart Empty
Heart
Loading
Lock
Meh
OK Circle
OK Sign
Smile
Empty Star
Half Empty Star
Half Star
Star
Thumbs Down
Thumbs Down Outline
Thumbs Up
Thumbs Up Outline
Unlock Alternate
Unlock
Warning

Symbols

Icons can represent common symbols

Angle Down
Angle Left
Angle Right
Angle up
Arrow Box Down
Arrow Box Right
Arrow Box Up
Down
Left
Right
Up
Asterisk
Triangle Down
Triangle Left
Triangle Right
Triangle Up
Down Arrow
Left Arrow
Right Arrow
Up Arrow
Arrow Sign Down
Arrow Sign Left
Arrow Sign Right
Arrow Sign Up
Circle Arrow Left
Circle Arrow Right
Circle Arrow Up
Circle Down Arrow
Circle Blank
Circle
Double Angle Down
Double Angle Left
Double angle Right
Double Angle Up
Hand Down
Hand Left
Hand Right
Hand Up
Long Arrow Down
Long Arrow Left
Long Arrow Right
Long Arrow Up
Minus
Minus Sign Alternate
Minus sign
Sign

Currency

Icons can represent units of currency

US Dollar
Euro
British Pound
Rupee
Korean Won
Japanese Yen
Chinese Yuan

Brands

Icons can represent logos to common brands

Adn
Android
Apple
Bitbucket
Bitbucket Sign
Bitcoin
CSS3
Dribbble
Dropbox
Facebook
Facebook Sign
Facetime Video
Flickr
Foursquare
Github Alternate
Github
Github Sign
Gittip
Google Plus
Google Plus Sign
H Sign
HTML5
Instagram
Linkedin
Linkedin Sign
Linux
Maxcdn
Pinterest
Pinterest Sign
Renren
Skype
Stackexchange
Trello
Tumblr
Tumblr Sign
Twitter
Twitter Sign
Vk
Weibo
Windows
Xing
Xing Sign
YouTube
YouTube Play
YouTube Sign

Custom Icon Set

This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.

Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.

Content

Icons can represent typical web content

Attachment
Barcode
Bookmark
Cart
Chart
Bar Chart
Pie Chart
Date
Doc
Docs
Email
Folder
Open Folder
Home
Mail
Photo
Photos
Search
Setting
Settings
Tag
Tags
Time
Top List
Trash
Community
URL
User
Users
Chat

Special Content

Icons can represent special types of web content

Trophy
Cloud
Flight
Gift
Dollar
Lab
RSS

User Actions

Icons can represent a possible user action

Add User
Block
Hide
Unhide
Lock
Unlock
Flag
Cancel
Close
Delete
Check
Edit
Open
Export
Forward
Upload
Like
Dislike
Pin
Star
Empty Star
Half Star
Print
Comment

View

Icons can represent ways to modify a page view

Content
Grid Layout
Block Layout
List Layout
>
Resize Full
Resize Horizontal
Resize Small
Resize Vertical
Zoom in
Zoom out

Media Actions

Icons can represent actions that occur on media

Eject
Fast-forward
Pause
Play
To-start
To-end
Forward
Shuffle
Clockwise
Counter clockwise

Objects

Icons can represent literal objects

Book
Calendar
Color
Desk globe
Fire
Globe
Headphones
Id
Idea
Lightning
Money
Paint

Indications

Icons can indicate the status of something

Cancel Circle
Asterisk
Attention Circle
Attention
Empty Heart
Heart
Thumbs Down
Thumbs Up
Terminal
Direction
Location
Help
Info
Mic
Off
Add

Symbols

Icons can represent common symbols

Left Open
Left Triangle
Left
Right
Right Triangle
Right Arrow
Up
Up Triangle
Up Arrow
Down Arrow
Down Triangle
Down Arrow
Cube
Minus
Plus

Websites

Icons can represent logos to common websites

Facebook
Twitter
Github

States

Disabled

An icon can show that it is disabled

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

Square

An icon can be formatted to appear square

Colors

An icon can be formatted with different colors

Inverted

an icon can have its colors inverted for contrast