component

Icons

USAJOBS leverages Font Awesome (converted to SVG) and defines specific icons for consistent use across the site.

Hiring path icons

Design complete

We use a consistent set of icons to identify users with a particular type of experience. For example, individuals who have served in the military or who have a disability. These icons are often used to help users identify with a particular hiring path, often tied to a special hiring authority, which they may be eligible for depending on their experience.

family-of-overseas-employees federal-employees-competitive federal-employees-excepted federal-employees-transition individuals-with-disabilities Created with Sketch. internal-to-an-agency Created with Sketch. land-mgmt Created with Sketch. military-spouses Created with Sketch. national-guard Created with Sketch. native-americans Created with Sketch. peace-corps public ses se-other students graduates veterans speical authorities land-mgmt
  • Public
  • Federal employees - Competitive
  • Federal employees - Excepted
  • Internal to an agency
  • Career transition (ICTAP, RPL)
  • Land Management
  • Veterans
  • Military Spouses
  • National Guard
  • Students
  • Recent graduates
  • Senior Executives
  • Individuals with disabilities
  • Family of overseas employees
  • Native Americans
  • Peace Corps & AmeriCorps VISTA
  • Speical authorities

Usability

When to use
  • Use each icon in conjunction with a user group that matches the represented set of experience.
  • Use whenever a specific hiring path is mentioned.
When to consider something else
  • Do not use these icons in isolation. Icons should appear alongside text describing the hiring path.
Implementation
  • These icons are collected in an SVG defs file at includes/icons/hiring-paths.svg and then referenced via the use element.

SVG icon set

Implementation
  • We've swapped in Font Awesome version 5 which is backward compatible with version 4 (with a JS shim) and uses SVG inline instead of an icon font file.