Table of contents

Icons

Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes 500+ icons.

How to use

To activate Metro Icon Font you must use metro-all.css or add to page metro-icons.css.


                    <link href="metro-icons.css" rel="stylesheet">
                

And them add class mif-* to element, example span And to change icon size add class mif-lg, mif-2x, mif-3x, mif-4x and mif-5x


                    <span class="mif-home"></span>
                    <span class="mif-home mif-lg"></span>
                    <span class="mif-home mif-2x"></span>
                    <span class="mif-home mif-3x"></span>
                    <span class="mif-home mif-4x"></span>
                    <span class="mif-home mif-5x"></span>
                

Icon color

To change color add class fg-* to icon element. Details for colors see on colors utilities page.


                    <span class="mif-home"></span>
                    <span class="mif-home mif-lg fg-cyan"></span>
                    <span class="mif-home mif-2x fg-pink"></span>
                    <span class="mif-home mif-3x fg-green"></span>
                    <span class="mif-home mif-4x fg-red"></span>
                    <span class="mif-home mif-5x fg-blue"></span>
                

Icon list 0

  • accessible
  • adb
  • add
  • add-photo
  • arrow-drop-down
  • arrow-drop-up
  • photo-camera
  • photo-camera-enhance
  • camera-front
  • camera-rear
  • chat
  • chat-bubble
  • chat-bubble-outline
  • comment
  • devices
  • flash-auto
  • flash-off
  • flash-on
  • qa
  • hdr-off
  • hdr-on
  • http
  • import-export
  • backspace
  • keyboard-tab
  • restaurant
  • location-off
  • room
  • navigation
  • near-me
  • network-cell
  • network-locked
  • network-wifi
  • cell-setting
  • phonelink-erase
  • phonelink-lock
  • phonelink-ring
  • phonelink-setup
  • present-all
  • lock-rotation
  • rotation
  • cell-no-internet
  • cell-null
  • cell-off
  • wifi-lock
  • wifi-off
  • verified
  • cast
  • cast-connected
  • add-shopping-cart
  • create-new-folder
  • dashboard
  • ev-station
  • fingerprint
  • goat
  • import-contacts
  • insert-drive-file
  • pan-tool
  • install
  • open-book
  • uninstall
  • drive2
  • news
  • book-reference
  • leanpub
  • user-secret
  • balance-scale
  • server
  • keyboard-voice
  • copy
  • paste
  • cut
  • copyright
  • trademark
  • registered
  • creative-commons
  • fonticons
  • earth2
  • shit
  • broadcast
  • organization
  • squirrel
  • steps
  • versions
  • language
  • unlink
  • fire-extinguisher
  • eur
  • gbp
  • dollar2
  • inr
  • cny
  • rouble
  • krw
  • try
  • bitcoin
  • stack2
  • stack3
  • lamp
  • justice
  • paw
  • visa
  • mastercard
  • discover
  • amex
  • cc-paypal
  • venus
  • mars
  • medium
  • location-city
  • library
  • calculator2
  • barbell
  • 3d-rotation
  • alarm
  • alarm-on
  • favorite
  • settings-ethernet
  • settings-power
  • settings-voice
  • shopping-basket
  • contacts-dialer
  • contacts-mail
  • drafts
  • mail
  • brightness-auto
  • multitrack-audio
  • widgets
  • usb
  • money
  • vertical-align-bottom
  • vertical-align-center
  • vertical-align-top
  • keyboard-return
  • security
  • looks
  • palette
  • layers
  • layers-clear
  • florist
  • gas-station
  • hotel
  • local-service
  • map2
  • traff
  • apps
  • expand-less
  • expand-more
  • menu
  • more-horiz
  • more-vert
  • unfold-less
  • unfold-more
  • not
  • event-available
  • event-busy
  • folder-sd-card
  • sync-disabled
  • sync-problem
  • vpn-lock
  • vpn-publ
  • school
  • mail-read
  • quote
  • home
  • pencil
  • eyedropper
  • paint
  • image
  • images
  • camera
  • headphones
  • music
  • film
  • video-camera
  • dice
  • books
  • stack
  • tag
  • tags
  • barcode
  • qrcode
  • cart
  • credit-card
  • calculator
  • help
  • envelop
  • location
  • compass
  • compass2
  • map
  • history
  • bell
  • calendar
  • printer
  • keyboard
  • download
  • upload
  • floppy-disk
  • drive
  • database
  • undo
  • redo
  • bubble
  • bubbles
  • user
  • users
  • user-plus
  • user-minus
  • user-check
  • hour-glass
  • search
  • zoom-in
  • zoom-out
  • enlarge
  • shrink
  • enlarge2
  • shrink2
  • key
  • wrench
  • equalizer
  • equalizer-v
  • cog
  • cogs
  • magic-wand
  • bug
  • trophy
  • gift
  • spoon-fork
  • rocket
  • meter
  • hammer
  • fire
  • bin
  • target
  • power
  • switch
  • power-cord
  • clipboard
  • list-numbered
  • list
  • list2
  • tree
  • cloud
  • cloud-download
  • cloud-upload
  • download2
  • upload2
  • earth
  • link
  • flag
  • attachment
  • eye
  • bookmark
  • bookmarks
  • contrast
  • brightness
  • star-empty
  • star-half
  • star-full
  • warning
  • notification
  • question
  • plus
  • minus
  • info
  • cancel
  • blocked
  • cross
  • checkmark
  • spell-check
  • enter
  • exit
  • tab
  • move-up
  • move-down
  • sort-asc
  • sort-desc
  • command
  • shift
  • crop
  • filter
  • bold
  • underline
  • italic
  • strikethrough
  • page-break
  • superscript
  • subscript
  • table
  • insert-template
  • pilcrow
  • ltr
  • rtl
  • section
  • paragraph-left
  • paragraph-center
  • paragraph-right
  • paragraph-justify
  • indent-increase
  • indent-decrease
  • embed
  • embed2
  • share
  • feed3
  • flow-branch
  • flow-cascade
  • flow-line
  • flow-parallel
  • flow-tree
  • air
  • medal
  • paper-plane
  • shareable
  • shop
  • shopping-basket2
  • thumbs-down
  • thumbs-up
  • traffic-cone
  • water
  • cabinet
  • suitcase
  • gamepad
  • lock
  • unlock
  • tools
  • pin
  • discout
  • profile
  • dollar
  • dollars
  • coins
  • male
  • female
  • piano
  • anchor
  • wifi-low
  • wifi-mid
  • wifi-full
  • perm-phone-msg
  • bt-settings
  • settings-phone
  • dialer-sip
  • dialpad
  • ring-volume
  • voicemail
  • bluetooth
  • bt-connected
  • bt-disabled
  • bt-searching
  • phonelink
  • phonelink-off
  • my-location
  • bt-audio
  • phone-bt
  • phone-forwarded
  • phone-in-talk
  • phone-locked
  • phone-missed
  • phone-paused
  • wifi-connect
  • feed
  • mic
  • phone
  • battery-full
  • battery-two
  • battery-one
  • battery-empty
  • battery-charge
  • display
  • laptop
  • mobile
  • tablet
  • tablet-landscape
  • keyboard-hide
  • play
  • pause
  • stop
  • backward
  • forward
  • first
  • last
  • previous
  • next
  • eject
  • volume-high
  • volume-medium
  • volume-low
  • volume-mute
  • volume-mute2
  • volume-plus
  • volume-minus
  • loop
  • loop2
  • infinite
  • shuffle
  • featured-play-list
  • featured-video
  • equalizer2
  • youtube2
  • IcoMoon
  • codepen
  • foursquare
  • flattr
  • stackoverflow
  • delicious
  • reddit
  • soundcloud
  • finder
  • tux
  • blogger
  • joomla
  • wordpress
  • deviantart
  • picassa
  • twitch
  • instagram
  • youtube-play
  • linux
  • jsfiddle
  • openid
  • digg
  • google-wallet
  • opencart
  • amazon
  • wikipedia
  • google
  • google-plus
  • google-plus2
  • facebook
  • facebook2
  • twitter
  • youtube
  • steam
  • steam2
  • onedrive
  • github
  • git
  • apple
  • android
  • windows
  • skype
  • linkedin
  • html5
  • css3
  • chrome
  • firefox
  • ie
  • opera
  • safari
  • creative-cloud
  • dropbox
  • evernote
  • paypal
  • swarm
  • vk
  • yelp
  • dribbble
  • lastfm
  • pinterest
  • stumbleupon
  • vimeo
  • odnoklassniki
  • gitlab
  • themeisle
  • grav
  • imdb
  • meetup
  • rainy4
  • cloud6
  • rainy2
  • snowflake
  • sunrise
  • sun
  • sun3
  • moon
  • windy
  • wind
  • showflake
  • cloudy
  • cloudy2
  • cloud2
  • weather
  • weather2
  • weather3
  • lines
  • cloud3
  • lightning
  • lightning2
  • rainy
  • windy2
  • windy3
  • snowy
  • snowy2
  • snowy3
  • weather4
  • cloudy2
  • cloud4
  • lightning3
  • sun4
  • moon2
  • cloudy3
  • cloud5
  • lightning4
  • rainy3
  • windy4
  • windy5
  • snowy4
  • snowy5
  • weather5
  • cloudy4
  • lightning5
  • thermometer
  • none
  • celsius
  • fahrenheit
  • chart-bars
  • chart-bars2
  • chart-dots
  • chart-pie
  • chart-line
  • spinner
  • spinner2
  • spinner3
  • spinner4
  • spinner5
  • note
  • note-add
  • description
  • folder2
  • folder-open2
  • folder-shared
  • folder-special2
  • libreoffice
  • file-openoffice
  • file-pdf
  • file-word
  • file-excel
  • file-powerpoint
  • file-image
  • file-archive
  • file-audio
  • file-movie
  • file-code
  • file-download
  • file-upload
  • file-binary
  • file-empty
  • files-empty
  • file-text
  • file-picture
  • file-music
  • file-play
  • file-video
  • file-zip
  • folder-special
  • folder
  • folder-open
  • folder-plus
  • folder-minus
  • folder-download
  • folder-upload
  • arrow-up-left
  • arrow-up
  • arrow-up-right
  • arrow-right
  • arrow-down-right
  • arrow-down
  • arrow-down-left
  • arrow-left
  • chevron-left
  • chevron-right
  • chevron-thin-down
  • chevron-thin-left
  • chevron-thin-right
  • chevron-thin-up
  • space-shuttle
  • automobile
  • cab
  • bicycle
  • bus
  • ship
  • motorcycle
  • train
  • subway
  • truck
  • directions-bike
  • drive-eta
  • airplane
  • satellite
  • local-airport
  • microscope
  • user-md
  • stethoscope
  • ambulance
  • medkit
  • injection
  • thermometer2
  • lab
  • heartbeat
  • heart
  • heart-broken