Iconsfont

Metro UI 4 Jekyll includes more then 300 icons in one font that can instantly be customized: size, color, drop shadow — anything that can be done with CSS.

To use the icon font add stylesheet to page:

<link href="iconFont.css" rel="stylesheet">

Or use your own icons, for example Font Awesome

Place Metro UI 4 Jekyll icons just about anywhere with <i> or <span> tags.

icon-rocket

<i class="icon-rocket"></i>
<span class="icon-rocket"></span>

Use built-in classes .on-left, .on-right to add margin 5px between icon and text and .on-left-more, .on-right-more to add margin 10px.

icon-rocket

<i class="icon-rocket on-left"></i>icon-rocket

icon-rocket

icon-rocket<i class="icon-rocket on-right"></i>

iconrocket

icon<i class="icon-rocket on-right on-left"></i>rocket

Change icon color style with built-in color classes.

iconrocket

icon<i class="icon-rocket fg-red on-right on-left"></i>rocket

And, of course, you can change visual style of icons with css.

iconrocket

icon<i class="icon-rocket on-right on-left"
    style="background: red;
           color: white;
           padding: 10px;
           border-radius: 50%"></i>rocket

Icons

  1. icon-home
  2. icon-newspaper
  3. icon-pencil
  4. icon-droplet
  5. icon-pictures
  6. icon-camera
  7. icon-music
  8. icon-film
  9. icon-camera-2
  10. icon-spades
  11. icon-clubs
  12. icon-diamonds
  13. icon-broadcast
  14. icon-mic
  15. icon-book
  16. icon-file
  17. icon-new
  18. icon-copy
  19. icon-folder
  20. icon-folder-2
  21. icon-tag
  22. icon-cart
  23. icon-basket
  24. icon-calculate
  25. icon-support
  26. icon-phone
  27. icon-mail
  28. icon-location
  29. icon-compass
  30. icon-history
  31. icon-clock
  32. icon-bell
  33. icon-calendar
  34. icon-printer
  35. icon-mouse
  36. icon-screen
  37. icon-laptop
  38. icon-mobile
  39. icon-cabinet
  40. icon-drawer
  41. icon-drawer-2
  42. icon-box
  43. icon-box-add
  44. icon-box-remove
  45. icon-download
  46. icon-upload
  47. icon-database
  48. icon-flip
  49. icon-flip-2
  50. icon-undo
  51. icon-redo
  52. icon-forward
  53. icon-reply
  54. icon-reply-2
  55. icon-comments
  56. icon-comments-2
  57. icon-comments-3
  58. icon-comments-4
  59. icon-comments-5
  60. icon-user
  61. icon-user-2
  62. icon-user-3
  63. icon-busy
  64. icon-loading
  65. icon-loading-2
  66. icon-search
  67. icon-zoom-in
  68. icon-zoom-out
  69. icon-key
  70. icon-key-2
  71. icon-locked
  72. icon-unlocked
  73. icon-wrench
  74. icon-equalizer
  75. icon-cog
  76. icon-pie
  77. icon-bars
  78. icon-stats-up
  79. icon-gift
  80. icon-trophy
  81. icon-diamond
  82. icon-coffee
  83. icon-rocket
  84. icon-meter-slow
  85. icon-meter-medium
  86. icon-meter-fast
  87. icon-dashboard
  88. icon-fire
  89. icon-lab
  90. icon-remove
  91. icon-briefcase
  92. icon-briefcase-2
  93. icon-cars
  94. icon-bus
  95. icon-cube
  96. icon-cube-2
  97. icon-puzzle
  98. icon-glasses
  99. icon-glasses-2
  100. icon-accessibility
  101. icon-accessibility-2
  102. icon-target
  103. icon-target-2
  104. icon-lightning
  105. icon-power
  106. icon-power-2
  107. icon-clipboard
  108. icon-clipboard-2
  109. icon-playlist
  110. icon-grid-view
  111. icon-tree-view
  112. icon-cloud
  113. icon-cloud-2
  114. icon-download-2
  115. icon-upload-2
  116. icon-upload-3
  117. icon-link
  118. icon-link-2
  119. icon-flag
  120. icon-flag-2
  121. icon-attachment
  122. icon-eye
  123. icon-bookmark
  124. icon-bookmark-2
  125. icon-star
  126. icon-star-2
  127. icon-star-3
  128. icon-heart
  129. icon-heart-2
  130. icon-thumbs-up
  131. icon-thumbs-down
  132. icon-plus
  133. icon-minus
  134. icon-help
  135. icon-help-2
  136. icon-blocked
  137. icon-cancel
  138. icon-cancel-2
  139. icon-checkmark
  140. icon-minus-2
  141. icon-plus-2
  142. icon-enter
  143. icon-exit
  144. icon-loop
  145. icon-arrow-up-left
  146. icon-arrow-up
  147. icon-arrow-up-right
  148. icon-arrow-right
  149. icon-arrow-down-right
  150. icon-arrow-down
  151. icon-arrow-down-left
  152. icon-arrow-left
  153. icon-arrow-up-2
  154. icon-arrow-right-2
  155. icon-arrow-down-2
  156. icon-arrow-left-2
  157. icon-arrow-up-3
  158. icon-arrow-right-3
  159. icon-arrow-down-3
  160. icon-arrow-left-3
  161. icon-menu
  162. icon-enter-2
  163. icon-backspace
  164. icon-backspace-2
  165. icon-tab
  166. icon-tab-2
  167. icon-checkbox
  168. icon-checkbox-unchecked
  169. icon-checkbox-partial
  170. icon-radio-checked
  171. icon-radio-unchecked
  172. icon-font
  173. icon-paragraph-left
  174. icon-paragraph-center
  175. icon-paragraph-right
  176. icon-paragraph-justify
  177. icon-left-to-right
  178. icon-right-to-left
  179. icon-share
  180. icon-new-tab
  181. icon-new-tab-2
  182. icon-embed
  183. icon-code
  184. icon-bluetooth
  185. icon-share-2
  186. icon-share-3
  187. icon-mail-2
  188. icon-google
  189. icon-google-plus
  190. icon-google-drive
  191. icon-facebook
  192. icon-instagram
  193. icon-twitter
  194. icon-feed
  195. icon-youtube
  196. icon-vimeo
  197. icon-flickr
  198. icon-picassa
  199. icon-dribbble
  200. icon-deviantart
  201. icon-github
  202. icon-github-2
  203. icon-github-3
  204. icon-github-4
  205. icon-github-5
  206. icon-github-6
  207. icon-git
  208. icon-wordpress
  209. icon-joomla
  210. icon-blogger
  211. icon-tumblr
  212. icon-yahoo
  213. icon-amazon
  214. icon-tux
  215. icon-apple
  216. icon-finder
  217. icon-android
  218. icon-windows
  219. icon-soundcloud
  220. icon-skype
  221. icon-reddit
  222. icon-linkedin
  223. icon-lastfm
  224. icon-delicious
  225. icon-stumbleupon
  226. icon-pinterest
  227. icon-xing
  228. icon-flattr
  229. icon-foursquare
  230. icon-paypal
  231. icon-yelp
  232. icon-libreoffice
  233. icon-file-pdf
  234. icon-file-openoffice
  235. icon-file-word
  236. icon-file-excel
  237. icon-file-powerpoint
  238. icon-file-zip
  239. icon-file-xml
  240. icon-file-css
  241. icon-html5
  242. icon-html5-2
  243. icon-css3
  244. icon-chrome
  245. icon-firefox
  246. icon-IE
  247. icon-opera
  248. icon-safari
  249. icon-IcoMoon
  250. icon-sunrise
  251. icon-sun
  252. icon-moon
  253. icon-sun-2
  254. icon-windy
  255. icon-wind
  256. icon-snowflake
  257. icon-cloudy
  258. icon-cloud-3
  259. icon-weather
  260. icon-weather-2
  261. icon-weather-3
  262. icon-lines
  263. icon-cloud-4
  264. icon-lightning-2
  265. icon-lightning-3
  266. icon-rainy
  267. icon-rainy-2
  268. icon-windy-2
  269. icon-windy-3
  270. icon-snowy
  271. icon-snowy-2
  272. icon-snowy-3
  273. icon-weather-4
  274. icon-cloudy-2
  275. icon-cloud-5
  276. icon-lightning-4
  277. icon-sun-3
  278. icon-moon-2
  279. icon-cloudy-3
  280. icon-cloud-6
  281. icon-cloud-7
  282. icon-lightning-5
  283. icon-rainy-3
  284. icon-rainy-4
  285. icon-windy-4
  286. icon-windy-5
  287. icon-snowy-4
  288. icon-snowy-5
  289. icon-weather-5
  290. icon-cloudy-4
  291. icon-lightning-6
  292. icon-thermometer
  293. icon-compass-2
  294. icon-none
  295. icon-Celsius
  296. icon-Fahrenheit
  297. icon-forrst
  298. icon-headphones
  299. icon-bug
  300. icon-cart-2
  301. icon-earth
  302. icon-battery
  303. icon-list
  304. icon-grid
  305. icon-alarm
  306. icon-location-2
  307. icon-pointer
  308. icon-diary
  309. icon-eye-2
  310. icon-console
  311. icon-location-3
  312. icon-move
  313. icon-monitor
  314. icon-mobile-2
  315. icon-switch
  316. icon-star-4
  317. icon-address-book
  318. icon-shit
  319. icon-cone
  320. icon-credit-card
  321. icon-type
  322. icon-volume
  323. icon-volume-2
  324. icon-locked-2
  325. icon-warning
  326. icon-info
  327. icon-filter
  328. icon-bookmark-3
  329. icon-bookmark-4
  330. icon-stats
  331. icon-compass-3
  332. icon-keyboard
  333. icon-award-fill
  334. icon-award-stroke
  335. icon-beaker-alt
  336. icon-beaker
  337. icon-move-vertical
  338. icon-move-horizontal
  339. icon-steering-wheel
  340. icon-volume-3
  341. icon-volume-mute
  342. icon-play
  343. icon-pause
  344. icon-stop
  345. icon-eject
  346. icon-first
  347. icon-last
  348. icon-play-alt
  349. icon-battery-empty
  350. icon-battery-half
  351. icon-battery-full
  352. icon-battery-charging
  353. icon-left-quote
  354. icon-right-quote
  355. icon-left-quote-alt
  356. icon-right-quote-alt
  357. icon-smiley
  358. icon-umbrella
  359. icon-info-2
  360. icon-chart-alt
  361. icon-floppy
  362. icon-at
  363. icon-hash
  364. icon-pilcrow
  365. icon-fullscreen-alt
  366. icon-fullscreen-exit-alt
  367. icon-layers-alt
  368. icon-layers
  369. icon-rainbow
  370. icon-air
  371. icon-spin
  372. icon-auction
  373. icon-dollar
  374. icon-dollar-2
  375. icon-coins
  376. icon-file-2
  377. icon-file-3
  378. icon-file-4
  379. icon-files
  380. icon-phone-2
  381. icon-tablet
  382. icon-monitor-2
  383. icon-window
  384. icon-tv
  385. icon-camera-3
  386. icon-image
  387. icon-open
  388. icon-sale
  389. icon-direction
  390. icon-medal
  391. icon-medal-2
  392. icon-satellite
  393. icon-discout
  394. icon-barcode
  395. icon-ticket
  396. icon-shipping
  397. icon-globe
  398. icon-anchor
  399. icon-pop-out
  400. icon-pop-in
  401. icon-resize
  402. icon-battery-2
  403. icon-battery-3
  404. icon-battery-4
  405. icon-battery-5
  406. icon-tools
  407. icon-alarm-2
  408. icon-alarm-cancel
  409. icon-alarm-clock
  410. icon-chronometer
  411. icon-ruler
  412. icon-lamp
  413. icon-lamp-2
  414. icon-scissors
  415. icon-volume-4
  416. icon-volume-5
  417. icon-volume-6
  418. icon-zip
  419. icon-zip-2
  420. icon-play-2
  421. icon-pause-2
  422. icon-record
  423. icon-stop-2
  424. icon-next
  425. icon-previous
  426. icon-first-2
  427. icon-last-2
  428. icon-arrow-left-4
  429. icon-arrow-down-4
  430. icon-arrow-up-4
  431. icon-arrow-right-4
  432. icon-arrow-right-4
  433. icon-arrow-left-5
  434. icon-arrow-down-5
  435. icon-arrow-up-5
  436. icon-arrow-right-5
  437. icon-cc
  438. icon-cc-by
  439. icon-cc-nc
  440. icon-cc-nc-eu
  441. icon-cc-nc-jp
  442. icon-cc-sa
  443. icon-cc-nd
  444. icon-cc-pd
  445. icon-cc-zero
  446. icon-cc-share
  447. icon-cc-share-2
  448. icon-cycle
  449. icon-stop-3
  450. icon-stats-2
  451. icon-stats-3

License info:

Icon Set: Broccolidry -- http://dribbble.com/shots/587469-Free-16px-Broccolidryiconsaniconsetitisfullof-icons
License: Aribitrary -- http://licence.visualidiot.com/

Icon Set: Meteocons -- http://www.alessioatzeni.com/meteocons/
License: Arbitrary -- http://www.alessioatzeni.com/meteocons/#about

Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/
License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/

Icon Set: Iconic -- http://somerandomdude.com/work/iconic/
License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/us/