23 #icon Icon

Icons using europa icons font.

Examples
.icon--external
External link icon
.icon--arrow-up
Arrow up icon
.icon--arrow-down
Arrow down icon
.icon--feedback
Feedback icon
.icon--spinner
Spinner icon
.icon--search
Search icon
.icon--language
Language icon
.icon--facebook
Facebook icon
.icon--twitter
Twitter icon
.icon--googleplus
G+ icon
.icon--linkedin
Linkedin icon
.icon--rss
RSS icon
.icon--up
Up icon
.icon--right
Right icon
.icon--down
Down icon
.icon--left
Left icon
.icon--file
File icon
.icon--audio
Audio icon
.icon--brochure
Brochure icon
.icon--edit
Edit icon
.icon--image
Image icon
.icon--download
Download icon
.icon--infographic
Infographic icon
.icon--multiple-files
Multiple files icon
.icon--organigram
Organigram icon
.icon--package
Package icon
.icon--slides
Slides icon
.icon--video
Video icon
.icon--error
Error icon
.icon--success
Success icon
.icon--warning
Warning icon
.icon--check
Check icon
.icon--generic-lang
Generic language icon
.icon--budget
Budget icon
.icon--digital
Digital icon
.icon--energy
Energy icon
.icon--euro
Euro icon
.icon--global
Global icon
.icon--growth
Growth icon
.icon--regulation
Regulation icon
.icon--tag-close
Rag close icon
.icon--tag-close-hover
Tag close with hover state icon
.icon--calendar
Calendar icon
.icon--location
Location icon
.icon--livestreaming
Live streaming icon
.icon--book
Book icon
.icon--data
Data icon
.icon--copy
Copy icon
.icon--spreadsheet
Spreadsheet icon
.icon--in
In icon
.icon--presentation
Presentation icon
.icon--info
Info icon
.icon--share
Share icon
.icon--faq
Faq icon
.icon--sort-up-down
Sort up and down icon
.icon--sort-up
Sort up icon
.icon--sort-down
Sort down icon
.icon--pause
Player pause outline icon
.icon--pause2
Player pause filled icon
.icon--play
Player play outline icon
.icon--play2
Player play filled icon 
<span class="icon [modifier class]"></span>
<span class="icon icon--yellowbg [modifier class]"></span>
<span class="icon icon--blue-dark [modifier class]"></span>

23.1 #icon.social Icon Social

Social network icons.

Example 
<div style="display: inline-block;">
  <ul style="list-style: none; padding: 0; margin: 0;">
    <li><a class='icon-social icon-social--arto' href="#">Arto</a></li>
    <li><a class='icon-social icon-social--bebo' href="#">Bebo</a></li>
    <li><a class='icon-social icon-social--bitly' href="#">Bitly</a></li>
    <li><a class='icon-social icon-social--blinklist' href="#">Blinklist</a></li>
    <li><a class='icon-social icon-social--blog' href="#">Blog</a></li>
    <li><a class='icon-social icon-social--blogger' href="#">Blogger</a></li>
    <li><a class='icon-social icon-social--delicious' href="#">Delicious</a></li>
    <li><a class='icon-social icon-social--digg' href="#">Digg</a></li>
    <li><a class='icon-social icon-social--diigo' href="#">Diigo</a></li>
    <li><a class='icon-social icon-social--dzone' href="#">Dzone</a></li>
    <li><a class='icon-social icon-social--email' href="#">Email</a></li>
    <li><a class='icon-social icon-social--facebook' href="#">Facebook - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia urna et.</a></li>
    <li><a class='icon-social icon-social--flickr' href="#">Flickr</a></li>
    <li><a class='icon-social icon-social--foursquare' href="#">Foursquare</a></li>
    <li><a class='icon-social icon-social--generic' href="#">Generic</a></li>
    <li><a class='icon-social icon-social--google' href="#">Google</a></li>
    <li><a class='icon-social icon-social--gplus'href="#">Gplus</a></li>
    <li><a class='icon-social icon-social--instagram' href="#">Instagram</a></li>
    <li><a class='icon-social icon-social--linkarena'href="#">Linkarena</a></li>
    <li><a class='icon-social icon-social--linkedin' href="#">Linkedin</a></li>
    <li><a class='icon-social icon-social--live' href="#">Live</a></li>
    <li><a class='icon-social icon-social--meneame' href="#">Meneame</a></li>
    <li><a class='icon-social icon-social--misterwong' href="#">Misterwong</a></li>
    <li><a class='icon-social icon-social--myspace' href="#">Myspace</a></li>
    <li><a class='icon-social icon-social--netlog' href="#">Netlog</a></li>
    <li><a class='icon-social icon-social--netvibes' href="#">Netvibes</a></li>
    <li><a class='icon-social icon-social--newsvine' href="#">Newsvine</a></li>
    <li><a class='icon-social icon-social--nujij' href="#">Nujij</a></li>
    <li><a class='icon-social icon-social--pinterest' href="#">Pinterest</a></li>
    <li><a class='icon-social icon-social--pocket' href="#">Pocket</a></li>
    <li><a class='icon-social icon-social--reddit' href="#">Reddit</a></li>
    <li><a class='icon-social icon-social--rss' href="#">Rss</a></li>
    <li><a class='icon-social icon-social--share' href="#">Share</a></li>
    <li><a class='icon-social icon-social--slideshare' href="#">Slideshare</a></li>
    <li><a class='icon-social icon-social--skype' href="#">Skype</a></li>
    <li><a class='icon-social icon-social--slashdot' href="#">Slashdot</a></li>
    <li><a class='icon-social icon-social--sonico' href="#">Sonico</a></li>
    <li><a class='icon-social icon-social--spotify' href="#">Spotify</a></li>
    <li><a class='icon-social icon-social--storify' href="#">Storify</a></li>
    <li><a class='icon-social icon-social--studivz' href="#">Studivz</a></li>
    <li><a class='icon-social icon-social--stumbleupon' href="#">Stumbleupon</a></li>
    <li><a class='icon-social icon-social--technorati' href="#">Technorati</a></li>
    <li><a class='icon-social icon-social--tuenti' href="#">Tuenti</a></li>
    <li><a class='icon-social icon-social--tumblr' href="#">Tumblr</a></li>
    <li><a class='icon-social icon-social--twitter'>Twitter</a></li>
    <li><a class='icon-social icon-social--viadeo'>Viadeo</a></li>
    <li><a class='icon-social icon-social--vine'>Vine</a></li>
    <li><a class='icon-social icon-social--wordpress'>Wordpress</a></li>
    <li><a class='icon-social icon-social--wykop'>Wykop</a></li>
    <li><a class='icon-social icon-social--xerpi'>Xerpi</a></li>
    <li><a class='icon-social icon-social--yammer'>Yammer</a></li>
    <li><a class='icon-social icon-social--youtube'>Youtube</a></li>
    <li><a class='icon-social icon-social--print'>Print</a></li>
  </ul>
</div>

<div style="display: inline-block;">
  <ul class="menu icon-social--smaller" style="list-style: none; padding: 0; margin: 0;">
    <li><a class='icon-social icon-social--facebook'>Facebook - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia urna et.</a></li>
    <li><a class='icon-social icon-social--flickr'>Flickr</a></li>
    <li><a class='icon-social icon-social--gplus'>Gplus</a></li>
    <li><a class='icon-social icon-social--linkedin'>Linkedin</a></li>
    <li><a class='icon-social icon-social--pinterest'>Pinterest</a></li>
    <li><a class='icon-social icon-social--rss'>Rss</a></li>
    <li><a class='icon-social icon-social--skype'>Skype</a></li>
    <li><a class='icon-social icon-social--storify'>Storify</a></li>
    <li><a class='icon-social icon-social--twitter'>Twitter</a></li>
    <li><a class='icon-social icon-social--yammer'>Yammer</a></li>
    <li><a class='icon-social icon-social--youtube'>Youtube</a></li>
  </ul>
</div>