USPTO Design

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

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.

 

Proposed

USPTO 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.

Suggested usage

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

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


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