Icons

An icon sets contains an arbitrary number of glyphs

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
<i class="archive icon"></i>
<i class="attachment icon"></i>
<i class="browser icon"></i>
<i class="bug icon"></i>
<i class="calendar icon"></i>
<i class="cart icon"></i>
<i class="certificate icon"></i>
<i class="chat icon"></i>
<i class="cloud icon"></i>
<i class="code icon"></i>
<i class="comment icon"></i>
<i class="dashboard icon"></i>
<i class="desktop icon"></i>
<i class="empty calendar icon"></i>
<i class="external url icon"></i>
<i class="external url sign icon"></i>
<i class="file icon"></i>
<i class="file outline icon"></i>
<i class="folder icon"></i>
<i class="open folder icon"></i>
<i class="open folder outline icon"></i>
<i class="folder outline icon"></i>
<i class="help icon"></i>
<i class="home icon"></i>
<i class="inbox icon"></i>
<i class="information icon"></i>
<i class="information letter icon"></i>
<i class="legal icon"></i>
<i class="location arrow icon"></i>
<i class="mail icon"></i>
<i class="mail outline icon"></i>
<i class="map icon"></i>
<i class="map marker icon"></i>
<i class="mobile icon"></i>
<i class="music icon"></i>
<i class="chat outline icon"></i>
<i class="comment outline icon"></i>
<i class="payment icon"></i>
<i class="photo icon"></i>
<i class="qr code icon"></i>
<i class="question icon"></i>
<i class="rss icon"></i>
<i class="rss sign icon"></i>
<i class="setting icon"></i>
<i class="settings icon"></i>
<i class="signal icon"></i>
<i class="sitemap icon"></i>
<i class="table icon"></i>
<i class="tablet icon"></i>
<i class="tag icon"></i>
<i class="tags icon"></i>
<i class="tasks icon"></i>
<i class="terminal icon"></i>
<i class="text file icon"></i>
<i class="text file outline icon"></i>
<i class="time icon"></i>
<i class="trash icon"></i>
<i class="url icon"></i>
<i class="user icon"></i>
<i class="users icon"></i>
<i class="video icon"></i>
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 Mail
Fullscreen
Hide
Level Down
Level Up
Off
Refresh
Remove Circle
Remove
Remove Sign
Reorder
Reply All Mail
Reply Mail
Retweet
Save
Screenshot
Search
Share
Share Sign
Sign in
Sign out
Tint
Unhide
Upload Disk
Upload
<i class="add icon"></i>
<i class="add sign icon"></i>
<i class="add sign box icon"></i>
<i class="adjust icon"></i>
<i class="bookmark empty icon"></i>
<i class="bookmark icon"></i>
<i class="cloud download icon"></i>
<i class="cloud upload icon"></i>
<i class="collapse icon"></i>
<i class="crop icon"></i>
<i class="download disk icon"></i>
<i class="download icon"></i>
<i class="edit icon"></i>
<i class="edit sign icon"></i>
<i class="empty flag icon"></i>
<i class="exchange icon"></i>
<i class="expand icon"></i>
<i class="filter icon"></i>
<i class="flag icon"></i>
<i class="fork code icon"></i>
<i class="forward mail icon"></i>
<i class="fullscreen icon"></i>
<i class="hide icon"></i>
<i class="level down icon"></i>
<i class="level up icon"></i>
<i class="off icon"></i>
<i class="refresh icon"></i>
<i class="remove circle icon"></i>
<i class="remove icon"></i>
<i class="remove sign icon"></i>
<i class="reorder icon"></i>
<i class="reply all mail icon"></i>
<i class="reply mail icon"></i>
<i class="retweet icon"></i>
<i class="save icon"></i>
<i class="screenshot icon"></i>
<i class="search icon"></i>
<i class="share icon"></i>
<i class="share sign icon"></i>
<i class="sign in icon"></i>
<i class="sign out icon"></i>
<i class="tint icon"></i>
<i class="unhide icon"></i>
<i class="upload disk icon"></i>
<i class="upload icon"></i>
View Actions

Icons can represent actions that modify a page view

Block Layout
Column Layout
Grid Layout
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
<i class="block layout icon"></i>
<i class="column layout icon"></i>
<i class="grid layout icon"></i>
<i class="list layout icon"></i>
<i class="resize full icon"></i>
<i class="resize horizontal icon"></i>
<i class="resize small icon"></i>
<i class="resize vertical icon"></i>
<i class="sort alphabet descending icon"></i>
<i class="sort alphabet icon"></i>
<i class="sort ascending icon"></i>
<i class="sort attributes descending icon"></i>
<i class="sort attributes icon"></i>
<i class="sort descending icon"></i>
<i class="sort icon"></i>
<i class="sort order descending icon"></i>
<i class="sort order icon"></i>
<i class="zoom in icon"></i>
<i class="zoom out icon"></i>
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
<i class="align center icon"></i>
<i class="align justify icon"></i>
<i class="align left icon"></i>
<i class="align right icon"></i>
<i class="bold icon"></i>
<i class="copy icon"></i>
<i class="cut icon"></i>
<i class="ellipsis horizontal icon"></i>
<i class="ellipsis vertical icon"></i>
<i class="font icon"></i>
<i class="indent left icon"></i>
<i class="indent right icon"></i>
<i class="italic icon"></i>
<i class="list icon"></i>
<i class="move icon"></i>
<i class="ordered list icon"></i>
<i class="paste icon"></i>
<i class="print icon"></i>
<i class="quote left icon"></i>
<i class="quote right icon"></i>
<i class="strikethrough icon"></i>
<i class="subscript icon"></i>
<i class="superscript icon"></i>
<i class="text height icon"></i>
<i class="text width icon"></i>
<i class="underline icon"></i>
<i class="undo icon"></i>
<i class="unlink icon"></i>
<i class="unordered list icon"></i>
Media Actions

Icons can represent actions that occur on media

Backward
Forward
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
<i class="backward icon"></i>
<i class="forward icon"></i>
<i class="eject icon"></i>
<i class="fast backward icon"></i>
<i class="fast forward icon"></i>
<i class="mute icon"></i>
<i class="pause icon"></i>
<i class="play circle icon"></i>
<i class="play icon"></i>
<i class="play sign icon"></i>
<i class="shuffle icon"></i>
<i class="repeat icon"></i>
<i class="step backward icon"></i>
<i class="step forward icon"></i>
<i class="stop icon"></i>
<i class="unmute icon"></i>
<i class="volume down icon"></i>
<i class="volume off icon"></i>
<i class="volume up icon"></i>
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
Wheel Chair
Wrench
<i class="ambulance icon"></i>
<i class="anchor icon"></i>
<i class="barcode icon"></i>
<i class="lab icon"></i>
<i class="beer icon"></i>
<i class="bell outline icon"></i>
<i class="bolt icon"></i>
<i class="book icon"></i>
<i class="briefcase icon"></i>
<i class="building icon"></i>
<i class="bullhorn icon"></i>
<i class="bullseye icon"></i>
<i class="camera icon"></i>
<i class="camera retro icon"></i>
<i class="coffee icon"></i>
<i class="doctor icon"></i>
<i class="eraser icon"></i>
<i class="female icon"></i>
<i class="fighter jet icon"></i>
<i class="fire extinguisher icon"></i>
<i class="fire icon"></i>
<i class="checkered flag icon"></i>
<i class="food icon"></i>
<i class="gamepad icon"></i>
<i class="gift icon"></i>
<i class="glass icon"></i>
<i class="globe icon"></i>
<i class="hdd icon"></i>
<i class="headphones icon"></i>
<i class="hospital icon"></i>
<i class="key icon"></i>
<i class="keyboard icon"></i>
<i class="laptop icon"></i>
<i class="leaf icon"></i>
<i class="lemon icon"></i>
<i class="lightbulb icon"></i>
<i class="magic icon"></i>
<i class="magnet icon"></i>
<i class="male icon"></i>
<i class="medkit icon"></i>
<i class="money icon"></i>
<i class="moon icon"></i>
<i class="pencil icon"></i>
<i class="phone icon"></i>
<i class="phone sign icon"></i>
<i class="pin icon"></i>
<i class="plane icon"></i>
<i class="puzzle piece icon"></i>
<i class="road icon"></i>
<i class="rocket icon"></i>
<i class="shield icon"></i>
<i class="stethoscope icon"></i>
<i class="suitcase icon"></i>
<i class="sun icon"></i>
<i class="ticket icon"></i>
<i class="trophy icon"></i>
<i class="truck icon"></i>
<i class="umbrella icon"></i>
<i class="wrench icon"></i>
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
<i class="ban circle icon"></i>
<i class="checkmark icon"></i>
<i class="checkmark sign icon"></i>
<i class="minus checkbox icon"></i>
<i class="empty checkbox icon"></i>
<i class="checked checkbox icon"></i>
<i class="exclamation icon"></i>
<i class="attention icon"></i>
<i class="frown icon"></i>
<i class="heart empty icon"></i>
<i class="heart icon"></i>
<i class="loading icon"></i>
<i class="lock icon"></i>
<i class="meh icon"></i>
<i class="ok circle icon"></i>
<i class="ok sign icon"></i>
<i class="smile icon"></i>
<i class="empty star icon"></i>
<i class="half empty star icon"></i>
<i class="half star icon"></i>
<i class="star icon"></i>
<i class="thumbs down icon"></i>
<i class="thumbs down outline icon"></i>
<i class="thumbs up icon"></i>
<i class="thumbs up outline icon"></i>
<i class="unlock alternate icon"></i>
<i class="unlock icon"></i>
<i class="warn icon"></i>
Symbols

Icons can represent common symbols

Angle Down
Angle Left
Angle Right
Angle up
Arrow Box Down
Arrow Box Right
Arrow Box Left
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 Left
Circle Right
Circle Up
Circle Down
Circle Blank
Circle
Circle Dot
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
<i class="angle down icon"></i>
<i class="angle left icon"></i>
<i class="angle right icon"></i>
<i class="angle up icon"></i>
<i class="arrow box down icon"></i>
<i class="arrow box right icon"></i>
<i class="arrow box left icon"></i>
<i class="arrow box up icon"></i>
<i class="down icon"></i>
<i class="left icon"></i>
<i class="right icon"></i>
<i class="up icon"></i>
<i class="asterisk icon"></i>
<i class="triangle down icon"></i>
<i class="triangle left icon"></i>
<i class="triangle right icon"></i>
<i class="triangle up icon"></i>
<i class="down arrow icon"></i>
<i class="left arrow icon"></i>
<i class="right arrow icon"></i>
<i class="up arrow icon"></i>
<i class="arrow sign down icon"></i>
<i class="arrow sign left icon"></i>
<i class="arrow sign right icon"></i>
<i class="arrow sign up icon"></i>
<i class="circle left icon"></i>
<i class="circle right icon"></i>
<i class="circle up icon"></i>
<i class="circle down icon"></i>
<i class="circle blank icon"></i>
<i class="circle icon"></i>
<i class="circle dot icon"></i>
<i class="double angle down icon"></i>
<i class="double angle left icon"></i>
<i class="double angle right icon"></i>
<i class="double angle up icon"></i>
<i class="hand down icon"></i>
<i class="hand left icon"></i>
<i class="hand right icon"></i>
<i class="hand up icon"></i>
<i class="long arrow down icon"></i>
<i class="long arrow left icon"></i>
<i class="long arrow right icon"></i>
<i class="long arrow up icon"></i>
<i class="minus icon"></i>
<i class="minus sign alternate icon"></i>
<i class="minus sign icon"></i>
<i class="sign icon"></i>
Currency

Icons can represent units of currency

Dollar
Euro
Pound
Rupee
Won
Yen
Rouble
Turkish Lira
<i class="dollar icon"></i>
<i class="euro icon"></i>
<i class="pound icon"></i>
<i class="rupee icon"></i>
<i class="won icon"></i>
<i class="yen icon"></i>
<i class="yuan icon"></i>
<i class="lira icon"></i>
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
<i class="adn icon"></i>
<i class="android icon"></i>
<i class="apple icon"></i>
<i class="bitbucket icon"></i>
<i class="bitbucket sign icon"></i>
<i class="bitcoin icon"></i>
<i class="css3 icon"></i>
<i class="dribbble icon"></i>
<i class="dropbox icon"></i>
<i class="facebook icon"></i>
<i class="facebook sign icon"></i>
<i class="facetime video icon"></i>
<i class="flickr icon"></i>
<i class="foursquare icon"></i>
<i class="github alternate icon"></i>
<i class="github icon"></i>
<i class="github sign icon"></i>
<i class="gittip icon"></i>
<i class="google plus icon"></i>
<i class="google plus sign icon"></i>
<i class="h sign icon"></i>
<i class="html5 icon"></i>
<i class="instagram icon"></i>
<i class="linkedin icon"></i>
<i class="linkedin sign icon"></i>
<i class="linux icon"></i>
<i class="maxcdn icon"></i>
<i class="pinterest icon"></i>
<i class="pinterest sign icon"></i>
<i class="renren icon"></i>
<i class="skype icon"></i>
<i class="stackexchange icon"></i>
<i class="trello icon"></i>
<i class="tumblr icon"></i>
<i class="tumblr sign icon"></i>
<i class="twitter icon"></i>
<i class="twitter sign icon"></i>
<i class="vk icon"></i>
<i class="weibo icon"></i>
<i class="windows icon"></i>
<i class="xing icon"></i>
<i class="xing sign icon"></i>
<i class="youtube icon"></i>
<i class="youtube play icon"></i>
<i class="youtube sign icon"></i>
Size

An icon can vary in size

<i class="small home icon"></i>
<i class="home icon"></i>
<i class="large home icon"></i>
<i class="big home icon"></i>
<i class="huge home icon"></i>
<i class="massive home icon"></i>
Flipped

An icon can be flipped

<i class="horizontally flipped cloud icon"></i>
<i class="vertically flipped cloud icon"></i>
Rotated

An icon can be rotated

<i class="clockwise rotated cloud icon"></i>
<i class="counterclockwise rotated cloud icon"></i>
Circular

An icon can be formatted to appear circular

<i class="circular users icon"></i>
<i class="circular teal users icon"></i>
<i class="circular inverted users icon"></i>
<i class="circular inverted teal users icon"></i>
Square

An icon can be formatted to appear square

<i class="square users icon"></i>
<i class="square teal users icon"></i>
<i class="square inverted users icon"></i>
<i class="square inverted teal users icon"></i>
Colors

An icon can be formatted with different colors

<i class="black users icon"></i>
<i class="info user icon"></i>
<i class="danger users icon"></i>
<i class="success user icon"></i>
<i class="purple chat icon"></i>
<i class="warning comment icon"></i>
<i class="teal comment icon"></i>