はじめに

Bootstrap標準アイコンと、追加で使えるWebフォントアイコンの一覧。
よく使うのにまとめたものが欲しかったので作りました。


Bootstrap Default(v2.2.2)

Bootstrapの標準アイコンの一覧。最新版・ダウンロードは公式サイトをご覧下さい。

Bootstrapのアイコンは、標準添付されていて使いやすいのですが、画像なので黒か白の2種類しか使えません。まぁ、個人的にはそれでいいのですが・・・

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

to top ▲


Font Awesome(v3.0)

Font AwesomeのWebフォントアイコンの一覧。最新版・ダウンロードは公式サイトをご覧下さい。

Font AwesomeはWebフォントなので、色を変えたり、大きさを変えたりできます。
また、CSS3のanimation機能を使って、回転させることができたりします。→

New Icons in 3.0

  • icon-cloud-download
  • icon-cloud-upload
  • icon-lightbulb
  • icon-exchange
  • icon-bell-alt
  • icon-file-alt
  • icon-beer
  • icon-coffee
  • icon-food
  • icon-fighter-jet
  • icon-user-md
  • icon-stethoscope
  • icon-suitcase
  • icon-building
  • icon-hospital
  • icon-ambulance
  • icon-medkit
  • icon-h-sign
  • icon-plus-sign-alt
  • icon-spinner
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-circle-blank
  • icon-circle
  • icon-desktop
  • icon-laptop
  • icon-tablet
  • icon-mobile-phone
  • icon-quote-left
  • icon-quote-right
  • icon-reply
  • icon-github-alt
  • icon-folder-close-alt
  • icon-folder-open-alt

Web Application Icons

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

Text Editor Icons

  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

Directional Icons

  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank

Video Player Icons

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

Social Icons

  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank

Medical Icons Want to change healthcare? Work with me at Kyruus.

  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md

to top ▲


Ligature Symbols(v2.09)

Ligature SymbolsのWebフォントアイコンの一覧。最新は公式サイトをご覧下さい。

Ligature Symbolsは「ls-icon-*」と記述することで利用できます。こちらのページを参考に(というかパクり)させて頂きました。感謝!

このアイコンはWebフォントを利用しているので、文字として扱えるため、色を変えたり、大きさを変更したりとすごく柔軟です。
しかも、作者が日本人のため、greeやmobage、mixiといった日本固有サービスのアイコンも多数あります。
ただし、現在はブラウザを選ぶ可能性があります。公式サイトでも「Ligature Symbols has broad support for the modern browser(Chrome, Safari, Firefox, iOS - Mobile Safari, Android Browser).」となっています。

Bootstrap的に使えるようにしたCSSとfontのセットを置いておきます。たぶんライセンス的には問題ないはずですが・・・

  • ls-icon-file
  • ls-icon-print
  • ls-icon-delete
  • ls-icon-clear
  • ls-icon-save
  • ls-icon-upload
  • ls-icon-cloud
  • ls-icon-folder
  • ls-icon-camera
  • ls-icon-photo
  • ls-icon-image
  • ls-icon-barcode
  • ls-icon-phone
  • ls-icon-music
  • ls-icon-video
  • ls-icon-playmedia
  • ls-icon-record
  • ls-icon-play
  • ls-icon-pause
  • ls-icon-stop
  • ls-icon-eject
  • ls-icon-bell
  • ls-icon-volumeup
  • ls-icon-volumedown
  • ls-icon-volume
  • ls-icon-off
  • ls-icon-light
  • ls-icon-dark
  • ls-icon-lock
  • ls-icon-unlock
  • ls-icon-flag
  • ls-icon-wifi
  • ls-icon-time
  • ls-icon-map
  • ls-icon-geo
  • ls-icon-location
  • ls-icon-pin
  • ls-icon-walking
  • ls-icon-bicycle
  • ls-icon-car
  • ls-icon-bus
  • ls-icon-plane
  • ls-icon-compass
  • ls-icon-arrowup
  • ls-icon-arrowright
  • ls-icon-arrowdown
  • ls-icon-arrowleft
  • ls-icon-up
  • ls-icon-right
  • ls-icon-down
  • ls-icon-left
  • ls-icon-back
  • ls-icon-next
  • ls-icon-dropdown
  • ls-icon-sort
  • ls-icon-good
  • ls-icon-bad
  • ls-icon-full
  • ls-icon-small
  • ls-icon-move
  • ls-icon-undo
  • ls-icon-forward
  • ls-icon-reply
  • ls-icon-share
  • ls-icon-login
  • ls-icon-logout
  • ls-icon-exchange
  • ls-icon-shuffle
  • ls-icon-repeat
  • ls-icon-refresh
  • ls-icon-sync
  • ls-icon-external
  • ls-icon-addstar
  • ls-icon-star
  • ls-icon-starempty
  • ls-icon-heart
  • ls-icon-heartempty
  • ls-icon-view
  • ls-icon-comment
  • ls-icon-comments
  • ls-icon-plus
  • ls-icon-minus
  • ls-icon-zoomin
  • ls-icon-zoomout
  • ls-icon-search
  • ls-icon-menu
  • ls-icon-tilemenu
  • ls-icon-list
  • ls-icon-tile
  • ls-icon-table
  • ls-icon-copy
  • ls-icon-cut
  • ls-icon-backspace
  • ls-icon-alignleft
  • ls-icon-aligncenter
  • ls-icon-alignright
  • ls-icon-alignadjust
  • ls-icon-italic
  • ls-icon-bold
  • ls-icon-underline
  • ls-icon-strike
  • ls-icon-emphasis
  • ls-icon-code
  • ls-icon-link
  • ls-icon-quote
  • ls-icon-graph
  • ls-icon-magic
  • ls-icon-brush
  • ls-icon-color
  • ls-icon-contrast
  • ls-icon-ink
  • ls-icon-gradation
  • ls-icon-sepia
  • ls-icon-invert
  • ls-icon-paint
  • ls-icon-paramater
  • ls-icon-crop
  • ls-icon-check
  • ls-icon-checkbox
  • ls-icon-checkboxempty
  • ls-icon-pc
  • ls-icon-keyboard
  • ls-icon-mobile
  • ls-icon-horizontal
  • ls-icon-vertical
  • ls-icon-web
  • ls-icon-mail
  • ls-icon-shopping
  • ls-icon-dashboard
  • ls-icon-key
  • ls-icon-sns
  • ls-icon-calender
  • ls-icon-dailycalender
  • ls-icon-ban
  • ls-icon-remove
  • ls-icon-pen
  • ls-icon-eraser
  • ls-icon-edit
  • ls-icon-tabs
  • ls-icon-tag
  • ls-icon-setup
  • ls-icon-setting
  • ls-icon-etc
  • ls-icon-clip
  • ls-icon-bookmark
  • ls-icon-book
  • ls-icon-album
  • ls-icon-user
  • ls-icon-friend
  • ls-icon-group
  • ls-icon-frustrate
  • ls-icon-laugh
  • ls-icon-wink
  • ls-icon-smile
  • ls-icon-surprise
  • ls-icon-trouble
  • ls-icon-game
  • ls-icon-globe
  • ls-icon-home
  • ls-icon-building
  • ls-icon-rss
  • ls-icon-app
  • ls-icon-memo
  • ls-icon-meal
  • ls-icon-coffee
  • ls-icon-present
  • ls-icon-twinkle
  • ls-icon-crown
  • ls-icon-category
  • ls-icon-circle
  • ls-icon-info
  • ls-icon-help
  • ls-icon-refreshbutton
  • ls-icon-notify
  • ls-icon-apple
  • ls-icon-android
  • ls-icon-windows
  • ls-icon-amazon
  • ls-icon-facebook
  • ls-icon-twitter
  • ls-icon-google
  • ls-icon-hatena
  • ls-icon-linkedin
  • ls-icon-mixi
  • ls-icon-line
  • ls-icon-mobage
  • ls-icon-gree
  • ls-icon-skype
  • ls-icon-foursquare
  • ls-icon-pinterest
  • ls-icon-flickr
  • ls-icon-tumblr
  • ls-icon-evernote
  • ls-icon-github
  • ls-icon-yapcasialogomark
  • ls-icon-dribbble
  • ls-icon-cookpad
  • ls-icon-instapaper
  • ls-icon-readability
  • ls-icon-gumroad
  • ls-icon-picasa
  • ls-icon-instagram
  • ls-icon-delicious
  • ls-icon-youtube
  • ls-icon-chrome
  • ls-icon-safari
  • ls-icon-sleipnir
  • ls-icon-firefox
  • ls-icon-opera
  • ls-icon-internetexplorer

to top ▲