Skip to main content

Overview

About Material design icons

  • Material design icons is the official icon set from Google. These icons are simple, modern and ensure readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.
  • Material design icons on GitHub.
  • A complete list of available icons is available in the icon gallery.

Usage

public launch computer
Example HTML usage: 
<!--Material icon usage -->
<i class="material-icons">public</i>
<i class="material-icons">launch</i>
<i class="material-icons">computer</i>
<i class="uspto-ip-icon-patent-pending"></i>

Icon color

Material design icons automatically inherit the color of the associated class or container around them.

  • 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 for color contrast.
public public public public public public public public public public public
Example HTML usage: 
<!--Material icon usage -->
<i class="material-icons text-primary">public</i>
<i class="material-icons text-secondary">public</i>
<i class="material-icons text-success">public</i>
<i class="material-icons text-danger">public</i>
<i class="material-icons text-warning">public</i>
<i class="material-icons text-info">public</i>
<i class="material-icons text-dark">public</i>
<i class="material-icons text-body">public</i>
<i class="material-icons text-muted">public</i>
<i class="material-icons text-white bg-dark">public</i>
<i class="material-icons text-white-50 bg-dark">public</i>

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 sizing

  • Material design icons can be scaled to any size, in accordance with material design icons guidelines. The default being 1.35rem.
    CSS rules for the standard material design sizing guidelines:
    • .material-icons.md-xs { font-size: .75rem; }
    • .material-icons.md-sm { font-size: 1rem; }
    • .material-icons.md-lg { font-size: 2rem; }
    • .material-icons.md-2x { font-size: 2.7rem; }
    • .material-icons.md-3x { font-size: 4.05rem; }
    • .material-icons.md-5x { font-size: 6.75rem; }
    • .material-icons.md-10x { font-size: 13.5rem; }
  • When scaling icons, ensure the sizes used appear sharp on standard and high DPI screens.
public public public public public public public
Example HTML usage: 
<!--Material icon usage -->
<i class="material-icons md-xs">public</i>
<i class="material-icons md-sm">public</i>
<i class="material-icons md-lg">public</i>
<i class="material-icons md-2x">public</i>
<i class="material-icons md-3x">public</i>
<i class="material-icons md-5x">public</i>
<i class="material-icons md-10x">public</i>

USPTO - Intellectual Property Symbols

uspto-ip-icon-patent-pending
uspto-ip-icon-plant-patent
uspto-ip-icon-utility-patent
uspto-ip-icon-pro-se
uspto-ip-icon-invention
uspto-ip-icon-maker
uspto-ip-icon-intellectual-property
uspto-ip-icon-design-patent
uspto-ip-icon-prior-art
uspto-ip-icon-small-inventor
uspto-ip-icon-large-inventor
uspto-ip-icon-infringement
uspto-ip-icon-trade-secret
uspto-ip-icon-micro-entity-inventor
uspto-ip-icon-service-mark
uspto-ip-icon-counterfeit
uspto-ip-icon-trademark
uspto-ip-icon-stem
uspto-ip-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