Overview

System icons

  • System icons should always be one solid color
  • System icons should either be black, white, or any other primary UI color
  • System icons can be placed in colored circles

Icon colors

You can change the color of an icon by utilizing the following CSS classes:
 
Primary
.icon-color-primary
Info
.icon-color-info
Success
.icon-color-success
Warning
.icon-color-warning
Danger
.icon-color-danger
 
Note: Use either a colored circle with a white icon, or a colored icon; not both together. If necessary, you may use a dark circle to add emphasis to warning icons. Always ensure final icon usage is 508 compliant.

Sizes

  • Icons can vary in size
  • When scaling icons, ensure the sizes used appear sharp on standard and high DPI screens
  • Icons may be scaled by adding the classes below: (note: scaled icons may require additional styling) BETA
.icon-2x
.icon-3x
.icon-4x
.icon-5x
.icon-6x
.icon-10x

Usage

  • Due to some organizations and browser configurations blocking web font downloads, the design library serves icons as an svg sprite
  • Your application and audience may benefit from other methods of serving icons
  • The method used for dynamically scaling icons is dependent on the method used for serving icons
  • The method used for coloring icons is dependent on the method used for serving icons
  • For performance, create icon bundles containing only used icons
  • The source SVG files are available on Github

These icons are derived from Font Awesome 4.4.0.

 

Web application icons

icon-adjust
icon-anchor
icon-archive
icon-area-chart
icon-arrows
icon-arrows-h
icon-arrows-v
icon-asterisk
icon-at
icon-automobile (alias)
icon-balance-scale
icon-ban
icon-bank (alias)
icon-bar-chart
icon-bar-chart-o (alias)
icon-barcode
icon-bars
icon-battery-0 (alias)
icon-battery-1 (alias)
icon-battery-2 (alias)
icon-battery-3 (alias)
icon-battery-4 (alias)
icon-beer
icon-bell
icon-bell-o
icon-bell-slash
icon-bell-slash-o
icon-bicycle
icon-binoculars
icon-birthday-cake
icon-black-tie
icon-bolt
icon-bomb
icon-book
icon-bookmark
icon-bookmark-o
icon-briefcase
icon-bug
icon-building
icon-building-o
icon-bullhorn
icon-bullseye
icon-bus
icon-cab (alias)
icon-calculator
icon-calendar
icon-calendar-o
icon-calendar-check-o
icon-calendar-minus-o
icon-calendar-plus-o
icon-calendar-times-o
icon-camera
icon-camera-retro
icon-car
icon-caret-square-o-down
icon-caret-square-o-left
icon-caret-square-o-right
icon-caret-square-o-up
icon-cc
icon-certificate
icon-check
icon-check-circle
icon-check-circle-o
icon-check-square
icon-check-square-o
icon-child
icon-circle
icon-circle-o
icon-circle-o-notch
icon-circle-thin
icon-clock-o
icon-close (alias)
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-code-fork
icon-coffee
icon-cog
icon-cogs
icon-comment
icon-comment-o
icon-comments
icon-comments-o
icon-commenting
icon-commenting-o
icon-compass
icon-copyright
icon-credit-card
icon-crop
icon-crosshairs
icon-cube
icon-cubes
icon-cutlery
icon-dashboard (alias)
icon-database
icon-desktop
icon-dot-circle-o
icon-download
icon-edit (alias)
icon-ellipsis-h
icon-ellipsis-v
icon-envelope
icon-envelope-o
icon-envelope-square
icon-eraser
icon-exchange
icon-exclamation
icon-exclamation-circle
icon-exclamation-triangle
icon-external-link
icon-external-link-square
icon-eye
icon-eye-slash
icon-eyedropper
icon-fax
icon-female
icon-fighter-jet
icon-file-archive-o
icon-file-audio-o
icon-file-code-o
icon-file-excel-o
icon-file-image-o
icon-file-movie-o (alias)
icon-file-pdf-o
icon-file-photo-o (alias)
icon-file-picture-o (alias)
icon-file-powerpoint-o
icon-file-sound-o (alias)
icon-file-video-o
icon-file-word-o
icon-file-zip-o (alias)
icon-film
icon-filter
icon-fire
icon-fire-extinguisher
icon-flag
icon-flag-checkered
icon-flag-o
icon-flash (alias)
icon-flask
icon-folder
icon-folder-o
icon-folder-open
icon-folder-open-o
icon-frown-o
icon-futbol-o
icon-gamepad
icon-gavel
icon-gear (alias)
icon-gears (alias)
icon-genderless
icon-gift
icon-glass
icon-globe
icon-graduation-cap
icon-group (alias)
icon-hdd-o
icon-hand-grab-o (alias)
icon-hand-lizard-o
icon-hand-paper-o
icon-hand-peace-o
icon-hand-pointer-o
icon-hand-scissors-o
icon-hand-spock-o
icon-hand-pointer-o
icon-headphones
icon-heart
icon-heart-o
icon-history
icon-home
icon-hourglass
icon-hourglass-1 (alias)
icon-hourglass-2 (alias)
icon-hourglass-3 (alias)
icon-image (alias)
icon-inbox
icon-industry
icon-info
icon-info-circle
icon-institution (alias)
icon-key
icon-keyboard-o
icon-language
icon-laptop
icon-leaf
icon-legal (alias)
icon-lemon-o
icon-level-down
icon-level-up
icon-life-bouy (alias)
icon-life-buoy (alias)
icon-life-ring
icon-life-saver (alias)
icon-lightbulb-o
icon-line-chart
icon-location-arrow
icon-lock
icon-magic
icon-magnet
icon-mail-forward (alias)
icon-mail-reply (alias)
icon-mail-reply-all (alias)
icon-male
icon-map-marker
icon-map
icon-map-o
icon-map-pin
icon-map-signs
icon-meh-o
icon-microphone
icon-microphone-slash
icon-minus
icon-minus-circle
icon-minus-square
icon-minus-square-o
icon-mobile
icon-mobile-phone (alias)
icon-money
icon-moon-o
icon-mortar-board (alias)
icon-music
icon-navicon (alias)
icon-newspaper-o
icon-paint-brush
icon-paper-plane
icon-paper-plane-o
icon-paw
icon-pencil
icon-pencil-square
icon-pencil-square-o
icon-phone
icon-phone-square
icon-photo (alias)
icon-picture-o
icon-pie-chart
icon-plane
icon-plug
icon-plus
icon-plus-circle
icon-plus-square
icon-plus-square-o
icon-power-off
icon-print
icon-puzzle-piece
icon-qrcode
icon-question
icon-question-circle
icon-quote-left
icon-quote-right
icon-random
icon-recycle
icon-refresh
icon-registered
icon-remove (alias)
icon-reorder (alias)
icon-reply
icon-reply-all
icon-retweet
icon-road
icon-rocket
icon-rss
icon-rss-square
icon-search
icon-search-minus
icon-search-plus
icon-send (alias)
icon-send-o (alias)
icon-share
icon-share-alt
icon-share-alt-square
icon-share-square
icon-share-square-o
icon-shield
icon-shopping-cart
icon-sign-in
icon-sign-out
icon-signal
icon-sitemap
icon-sliders
icon-smile-o
icon-soccer-ball-o (alias)
icon-sort
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-sort-asc
icon-sort-desc
icon-sort-down (alias)
icon-sort-numeric-asc
icon-sort-numeric-desc
icon-sort-up (alias)
icon-space-shuttle
icon-spinner
icon-spoon
icon-square
icon-square-o
icon-star
icon-star-half
icon-star-half-empty (alias)
icon-star-half-full (alias)
icon-star-half-o
icon-star-o
icon-sticky-note
icon-sticky-note-o
icon-suitcase
icon-sun-o
icon-support (alias)
icon-tablet
icon-tachometer
icon-tag
icon-tags
icon-tasks
icon-taxi
icon-television
icon-terminal
icon-thumb-tack
icon-thumbs-down
icon-thumbs-o-down
icon-thumbs-o-up
icon-thumbs-up
icon-ticket
icon-times
icon-times-circle
icon-times-circle-o
icon-tint
icon-toggle-down (alias)
icon-toggle-left (alias)
icon-toggle-off
icon-toggle-on
icon-toggle-right (alias)
icon-toggle-up (alias)
icon-trademark
icon-trash
icon-trash-o
icon-tree
icon-trophy
icon-truck
icon-tty
icon-umbrella
icon-university
icon-unlock
icon-unlock-alt
icon-unsorted (alias)
icon-upload
icon-user
icon-users
icon-video-camera
icon-volume-down
icon-volume-off
icon-volume-up
icon-warning (alias)
icon-wheelchair
icon-wifi
icon-wrench


File type icons

icon-file
icon-file-archive-o
icon-file-audio-o
icon-file-code-o
icon-file-excel-o
icon-file-image-o
icon-file-movie-o (alias)
icon-file-o
icon-file-pdf-o
icon-file-photo-o (alias)
icon-file-picture-o (alias)
icon-file-powerpoint-o
icon-file-sound-o (alias)
icon-file-text
icon-file-text-o
icon-file-video-o
icon-file-word-o
icon-file-zip-o (alias)


Spinner icons

icon-circle-o-notch
icon-cog
icon-gear (alias)
icon-refresh
icon-spinner


Form control icons

icon-check-square
icon-check-square-o
icon-circle
icon-circle-o
icon-dot-circle-o
icon-minus-square
icon-minus-square-o
icon-plus-square
icon-plus-square-o
icon-square
icon-square-o


Payment icons

icon-cc-amex
icon-cc-diners-club
icon-cc-discover
icon-cc-jcb
icon-cc-mastercard
icon-cc-paypal
icon-cc-stripe
icon-cc-visa
icon-credit-card
icon-google-wallet
icon-paypal


Chart icons

icon-area-chart
icon-bar-chart
icon-bar-chart-o (alias)
icon-line-chart
icon-pie-chart


Currency icons

icon-bitcoin (alias)
icon-btc
icon-cny (alias)
icon-dollar (alias)
icon-eur
icon-euro (alias)
icon-gbp
icon-ils
icon-inr
icon-jpy
icon-krw
icon-money
icon-rmb (alias)
icon-rouble (alias)
icon-rub
icon-ruble (alias)
icon-rupee (alias)
icon-shekel (alias)
icon-sheqel (alias)
icon-try
icon-turkish-lira (alias)
icon-usd
icon-won (alias)
icon-yen (alias)


Text editor icons

icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-bold
icon-chain (alias)
icon-chain-broken
icon-clipboard
icon-clone
icon-columns
icon-copy (alias)
icon-i-cursor
icon-cut (alias)
icon-dedent (alias)
icon-eraser
icon-file
icon-file-o
icon-file-text
icon-file-text-o
icon-files-o
icon-floppy-o
icon-font
icon-header
icon-indent
icon-italic
icon-link
icon-list
icon-list-alt
icon-list-ol
icon-list-ul
icon-mouse-pointer
icon-object-group
icon-object-ungroup
icon-outdent
icon-paperclip
icon-paragraph
icon-paste (alias)
icon-repeat
icon-rotate-left (alias)
icon-rotate-right (alias)
icon-save (alias)
icon-scissors
icon-strikethrough
icon-subscript
icon-superscript
icon-table
icon-text-height
icon-text-width
icon-th
icon-th-large
icon-th-list
icon-underline
icon-undo
icon-unlink (alias)


Directional icons

icon-angle-double-down
icon-angle-double-left
icon-angle-double-right
icon-angle-double-up
icon-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-arrow-circle-down
icon-arrow-circle-left
icon-arrow-circle-o-down
icon-arrow-circle-o-left
icon-arrow-circle-o-right
icon-arrow-circle-o-up
icon-arrow-circle-right
icon-arrow-circle-up
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrows
icon-arrows-alt
icon-arrows-h
icon-arrows-v
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-square-o-down
icon-caret-square-o-left
icon-caret-square-o-right
icon-caret-square-o-up
icon-caret-up
icon-chevron-circle-down
icon-chevron-circle-left
icon-chevron-circle-right
icon-chevron-circle-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-hand-o-down
icon-hand-o-left
icon-hand-o-right
icon-hand-o-up
icon-long-arrow-down
icon-long-arrow-left
icon-long-arrow-right
icon-long-arrow-up
icon-toggle-down (alias)
icon-toggle-left (alias)
icon-toggle-right (alias)
icon-toggle-up (alias)


Video player icons

icon-arrows-alt
icon-backward
icon-compress
icon-eject
icon-expand
icon-fast-backward
icon-fast-forward
icon-forward
icon-pause
icon-play
icon-play-circle
icon-play-circle-o
icon-step-backward
icon-step-forward
icon-stop
icon-youtube-play


Brand icons

icon-px
icon-adn
icon-amazon
icon-android
icon-angellist
icon-apple
icon-behance
icon-behance-square
icon-bitbucket
icon-bitbucket-square
icon-bitcoin (alias)
icon-btc
icon-cc-amex
icon-cc-diners-club
icon-cc-discover
icon-cc-jcb
icon-cc-mastercard
icon-cc-paypal
icon-cc-stripe
icon-cc-visa
icon-chrome
icon-codepen
icon-contao
icon-creative-commons
icon-css3
icon-delicious
icon-deviantart
icon-digg
icon-dribbble
icon-dropbox
icon-drupal
icon-empire
icon-expeditedssl
icon-facebook
icon-facebook-square
icon-firefox
icon-flickr
icon-fonticons
icon-foursquare
icon-ge (alias)
icon-get-pocket
icon-gg
icon-gg-circle
icon-git
icon-git-square
icon-github
icon-github-alt
icon-github-square
icon-gittip
icon-google
icon-google-plus
icon-google-plus-square
icon-google-wallet
icon-hacker-news
icon-houzz
icon-html5
icon-instagram
icon-internet-explorer
icon-ioxhost
icon-joomla
icon-jsfiddle
icon-lastfm
icon-lastfm-square
icon-linkedin
icon-linkedin-square
icon-linux
icon-maxcdn
icon-meanpath
icon-odnoklassniki
icon-odnoklassniki-square
icon-opencart
icon-openid
icon-opera
icon-optin-monster
icon-pagelines
icon-paypal
icon-pied-piper
icon-pied-piper-alt
icon-pinterest
icon-pinterest-square
icon-qq
icon-ra (alias)
icon-rebel
icon-reddit
icon-reddit-square
icon-renren
icon-safari
icon-share-alt
icon-share-alt-square
icon-skype
icon-slack
icon-slideshare
icon-soundcloud
icon-spotify
icon-stack-exchange
icon-stack-overflow
icon-steam
icon-steam-square
icon-stumbleupon
icon-stumbleupon-circle
icon-tencent-weibo
icon-trello
icon-tripadvisor
icon-tumblr
icon-tumblr-square
icon-twitch
icon-twitter
icon-twitter-square
icon-vimeo
icon-vimeo-square
icon-vine
icon-vk
icon-wechat (alias)
icon-weibo
icon-weixin
icon-wikipedia-w
icon-windows
icon-wordpress
icon-xing
icon-xing-square
icon-yahoo
icon-y-combinator
icon-yelp
icon-youtube
icon-youtube-play
icon-youtube-square


Medical icons

icon-ambulance
icon-h-square
icon-hospital-o
icon-medkit
icon-plus-square
icon-stethoscope
icon-user-md
icon-wheelchair


Proposed

OC custom application icons

oc-access-dav
oc-add-page-icon
oc-add-preferred-reviewer-icon
oc-approve-icon
oc-bold-type-icon
oc-clear-form-fields-icon
oc-close-set
oc-close-tab-hover-icon
oc-close-tab-icon
oc-collapse-set
oc-collapse-toggle-icon
oc-console-icon
oc-create-new-icon
oc-create-scenario-icon
oc-delete-page-icon
oc-document-add-icon
oc-document-delete-icon
oc-document-icon
oc-document-rename-icon
oc-dropdown-icon
oc-expand-set
oc-expand-toggle-icon
oc-folder-view-icon
oc-gadget-actions-icon
oc-gadgets-briefcase2-icon
oc-gadgets-briefcase-icon
oc-help-icon
oc-html-edit-icon
oc-html-icon
oc-ifw-reference-icon
oc-import-manager-icon
oc-italic-type-icon
oc-list-view-icon
oc-mail-set2-icon
oc-mail-set-icon
oc-make-special-icon
oc-member-list-icon
oc-notification-icon
oc-oacs-archive-active-icon
oc-oacs-archive-icon
oc-opener-icon
oc-options-gear-icon
oc-pdf-annotate-einitials
oc-pdf-annotate-esignature
oc-pdf-edit-icon
oc-pdf-icon
oc-postforconsult-icon
oc-postforcredit-icon
oc-preview-icon
oc-print-set-icon
oc-refresh-icon
oc-remove-preferred-reviewer-icon
oc-remove-reviewer-icon
oc-reports-icon
oc-resettodefault-icon
oc-return-icon
oc-save-close-icon
oc-search-icon
oc-setasdefault-icon
oc-set-delete-icon
oc-set-rename-icon
oc-spe-mgmt-db-icon
oc-status-icon
oc-submit-icon
oc-tab-slope-left-icon
oc-tab-slope-right-icon
oc-wordedit-icon
oc-word-icon
oc-zoom-handle-icon

About

These icons were created for the Official Correspondence application.

Suggested usage

  • Currently posted for awareness, further use is being evaluated.

Proposed

Iconathon - Intellectual Property Symbols

icon-utility-patent
icon-patent-pending
icon-plant-patent
icon-pro-se
icon-invention
icon-maker
icon-intellectual-property
icon-design-patent
icon-prior-art
icon-small-inventor
icon-large-inventor
icon-infringement
icon-trade-secret
icon-micro-entity-inventor
icon-service-mark
icon-counterfeit
icon-ptotrademark
icon-stem
icon-pro-bono

About

These icons were created during the USPTO Iconathon, a workshop to create a set of icons that represent intellectual property concepts that don’t have a universal and recognized icon to represent them. Partnering with the Noun Project, we called on students, civic activists, artists, and intellectual property enthusiasts to collaborate, brainstorm, and sketch designs.

Usage

  • As complementary artwork for headings (H1,H2,H3)
  • On welcome and/or marketing pages only
  • Featured icons in website billboard sections
  • Alongside lists of anchor links

Download the original SVG/PNG files at thenounproject.com/USPTO