IcoMoon

244 icons are included in the format of the font set IcoMoon.

icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-pencil3
icon-pencil4
icon-feather
icon-brush
icon-pictures
icon-pictures2
icon-picture
icon-picture2
icon-pictures3
icon-camera
icon-camera2
icon-movie
icon-movie2
icon-movie3
icon-film
icon-film2
icon-king
icon-queen
icon-announcement
icon-announcement2
icon-broadcast
icon-books
icon-reading
icon-file
icon-file-add
icon-file-remove
icon-copy
icon-stack
icon-folder
icon-folder2
icon-folder-add
icon-folder-remove
icon-folder-add2
icon-folder-remove2
icon-folder-download
icon-folder-upload
icon-folder-download2
icon-folder-upload2
icon-folder3
icon-folder4
icon-tag
icon-tag2
icon-tag3
icon-tag4
icon-tag5
icon-barcode
icon-barcode2
icon-ticket
icon-cart
icon-cart2
icon-cart3
icon-cart4
icon-cart-add
icon-cart-remove
icon-cart-checkout
icon-basket
icon-basket2
icon-bag
icon-coin
icon-support
icon-phone
icon-phone2
icon-phone3
icon-phone4
icon-address
icon-address2
icon-notebook
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-mail5
icon-location
icon-location2
icon-location3
icon-location4
icon-map
icon-map2
icon-history
icon-clock
icon-clock2
icon-wrist-watch
icon-calendar
icon-calendar2
icon-printer
icon-printer2
icon-screen
icon-screen2
icon-laptop
icon-mobile
icon-tablet
icon-mobile2
icon-disk
icon-cd
icon-comments
icon-comments2
icon-comments3
icon-comments4
icon-comments5
icon-comments6
icon-comments7
icon-comments8
icon-comments9
icon-user
icon-user-add
icon-user-remove
icon-users
icon-users2
icon-quote
icon-quote2
icon-quote3
icon-quote4
icon-search
icon-search2
icon-zoom-in
icon-zoom-out
icon-key
icon-key2
icon-locked
icon-unlocked
icon-locked2
icon-unlocked2
icon-cogs
icon-cog
icon-cog2
icon-remove
icon-remove2
icon-remove3
icon-remove4
icon-remove5
icon-clipboard
icon-clipboard2
icon-grid
icon-list
icon-list2
icon-list3
icon-grid2
icon-list4
icon-list5
icon-list6
icon-menu
icon-menu4
icon-link
icon-star
icon-star2
icon-star3
icon-heart
icon-heart2
icon-thumbs-up
icon-thumbs-down
icon-male
icon-female
icon-reload
icon-turn
icon-expand
icon-cancel
icon-checkmark
icon-checkmark2
icon-checkmark3
icon-minus
icon-plus
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-exclamation-sign
icon-info-sign
icon-logout
icon-arrow-up
icon-arrow-right
icon-arrow-down
icon-arrow-left
icon-arrow-up2
icon-arrow-right2
icon-arrow-down2
icon-arrow-left2
icon-arrow-up3
icon-arrow-right3
icon-arrow-down3
icon-arrow-left3
icon-arrow-up4
icon-arrow-right4
icon-arrow-down4
icon-arrow-left4
icon-arrow-down5
icon-arrow-left5
icon-arrow-right5
icon-arrow-up5
icon-arrow-left6
icon-arrow-right6
icon-arrow-up7
icon-arrow-right7
icon-arrow-left7
icon-arrow-down7
icon-sort-up
icon-sort-down
icon-sort
icon-delivery
icon-delivery2
icon-delivery3
icon-delivery4
icon-delivery5
icon-idcard
icon-idcard2
icon-idcard3
icon-mail-book
icon-user-book
icon-earth
icon-gplus
icon-gplus2
icon-gplus3
icon-facebook
icon-facebook2
icon-facebook3
icon-twitter
icon-twitter2
icon-twitter3
icon-feed
icon-feed2
icon-feed3
icon-youtube
icon-youtube2
icon-vimeo
icon-vimeo2
icon-linkedin
icon-linkedin4
icon-linkedin2
icon-html5
icon-html52
icon-chrome
icon-firefox
icon-IE
icon-opera
icon-safari
icon-toaster

Размеры иконок

<!-- Increasing icon, but the inner text is hidden -->
<span class="icon-toaster icon12">.icon12</span>
<span class="icon-toaster icon14">.icon14</span>
<span class="icon-toaster icon16">.icon16</span>
<span class="icon-toaster icon18">.icon18</span>
<span class="icon-toaster icon24">.icon24</span>
<span class="icon-toaster icon32">.icon32</span>
<span class="icon-toaster icon48">.icon48</span>
<span class="icon-toaster icon64">.icon64</span>
    
<!-- Increasing icon and inner text remains unchanged -->
<span class="icon-toaster is12">.is12</span>
<span class="icon-toaster is14">.is14</span>
<span class="icon-toaster is16">.is16</span>
<span class="icon-toaster is18">.is18</span>
<span class="icon-toaster is24">.is24</span>
<span class="icon-toaster is32">.is32</span>
<span class="icon-toaster is48">.is48</span>
<span class="icon-toaster is64">.is64</span>

Panels

Although it's not always necessary, but sometimes you need to pack DOM. For such cases, try panel component.

The main example

.panel-header - panel header

.panel-content - panel content

.panel-footer - panel footer

A simple example of panel
<div class="panel">
    <div class="panel-content">...</div>
</div>

Panel with header 

You can easily add container headers to the panel with  .panel-header.

Panel name
Panel content
<div class="panel">
    <div class="panel-header">...</div>
    <div class="panel-content">...</div>
</div>

Wrap the button or secondary text in .panel-footer. Please note, that this panel with footer doesn't inherit  colors and borders using contextual options, since they are not intended to be in the foreground.

Panel content
<div class="panel">
    <div class="panel-content">...</div>
    <div class="panel-footer">...</div>
</div>

Collapsible panel

You can easily collapse the panel adding the class  .collapse to .panel  and the button <span class="collapse-btn icon-plus"></span> to the panel header  .panel-header.

Panel name
Panel content
<div class="panel collapse">
    <div class="panel-header">...</div>
    <div class="panel-content">...</div>
    <div class="panel-footer">...</div>
</div>

Contextual alternatives

As well as other components, you can easily make a panel more expressive for a specific context adding one of the classes.

Panel name
Panel content
Panel name
Panel content
Panel name
Panel content
Panel name
Panel content
Panel name
Panel content
<div class="panel success">...</div>
<div class="panel info">...</div>
<div class="panel warning">...</div>
<div class="panel error">...</div>
<div class="panel gray">...</div>

Messages

Context messages for typical user activities.

Examples

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<p class="message">...</p>
<p class="message success">...</p>
<p class="message info">...</p>
<p class="message warning">...</p>
<p class="message error">...</p>
<p class="message gray">...</p>

Message with an icon

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you.

<p class="message icon-comments">...</p>

Message position

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<p class="message right">...</p>

Callouts


Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?
<p class="callout">...</p>

Callout with header

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?
<div class="callout">
    <h3 class="callout-header">...</h3>
    <p>...</p>
</div>

Color alternatives

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?
<p class="callout success">...</p>
<p class="callout info">...</p>
<p class="callout warning">...</p>
<p class="callout error">...</p>
<p class="callout gray">...</p>

Social elements


Buttons

<!-- Button icon only -->
<a class="btn icon gplus icon-gplus">GPlus</a>
<a class="btn icon facebook icon-facebook">Facebok</a>
<a class="btn icon twitter icon-twitter">Twitter</a>
<a class="btn icon linkedin icon-linkedin">Linkedin</a>
<a class="btn icon rss icon-feed">RSS</a>
<a class="btn icon youtube icon-youtube">Youtube</a>

<!-- Button default -->
<a class="btn gplus">GPlus</a>
<a class="btn facebook">Facebok</a>
<a class="btn twitter">Twitter</a>
<a class="btn linkedin">Linkedin</a>
<a class="btn rss">RSS</a>
<a class="btn youtube">Youtube</a>

Form fields

Signature accentuation

<p class="labeled gplus">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Google+</label>
</p>
<p class="labeled facebook">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Facebook</label>
</p>
<p class="labeled twitter">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Twitter</label>
</p>
<p class="labeled linkedin">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">LinkedIn</label>
</p>
<p class="labeled rss">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">RSS</label>
</p>
<p class="labeled youtube">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">YouTube</label>
</p>

With icons

<p class="labeled icon left gplus">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-gplus"></i>
</p>
<p class="labeled icon left facebook">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-facebook"></i>
</p>
<p class="labeled icon left twitter">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-twitter"></i>
</p>
<p class="labeled icon left linkedin">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-linkedin"></i>
</p>
<p class="labeled icon left rss">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-feed"></i>
</p>
<p class="labeled icon left youtube">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-youtube"></i>
</p>