Opportunity Standard

Icons are supplementary visual aids that help add emphasis and meaning. Icons in the Opportunity Standard follow guidance from the U.S. Web Design System (USWDS) Icon component but includes its own set of custom icons and integration of open source icon libraries.

It’s important to combine an icon with text as it is the most certain way of communicating the meaning of the icon. Test with users or follow guidance from Nielson Norman Group on “Icon Usability.”.

Icons can be implemented using Scalable Vector Graphic (SVG) sprites which is a collection of individual icons (SVGs) in a single SVG file. Read more about Icon Sprite Usage below.

If using an icon without a visual label, set the role attribute of the svg element to img and add alternative text in the SVG title tag for screen readers.

<svg class="icon" role="img">
  <title>Disability accommodation details are available. View this program to learn more.</title>
  <use href="#nyco-accessibility"></use>
</svg>

Otherwise, if the icon doesn’t add any contextual value as a label or it is already paired with a visible text label, it can be visually hidden by setting its aria-hidden attribute to true.

<p class="flex items-center">
  <svg class="icon mie-1" aria-hidden="true">
    <use href="#nyco-accessibility"></use>
  </svg> <span>Disability accommodation details are available. View this program to learn more.</span>
<p>

The common method for implementing SVG sprites is to include them in the page dynamically. Then, individual icons are referenced on the page with the use tag using their ID which corresponds with their filename.

The SVG sprite for Opportunity Standard icons, including Custom UI Icons, Program Icons, and Logos can be referenced at the following path.

'@nycopportunity/standard/dist/svg/svgs.svg'

A sprite for the Patterns Elements package is found at the following path.

'@nycopportunity/standard/dist/svg/pattern-elements.svg'

Lastly, a sprite for the Lucide open source library (described below) is found at the following path.

'@nycopportunity/standard/dist/svg/lucide.svg'

Follow the SVGs Installation instructions to add icon sprites to the page dynamically.

The Opportunity Standard contains a collection of Program Icons that representing public benefit and service categories. The set is not an exhaustive representation of programs but currently features categories from the ACCESS NYC and Working NYC websites.

include{{ /elements/icons/icons-program.slm }}

Program Card Icons

Program Card Icons are an alternative display for Program Icons for use in the Card component.

include{{ /elements/icons/icons-program-card.slm }}

The Opportunity Standard integrates the Lucide open source library for use as UI icons. These icons are used throughout applications to provide visual context to Link or Button labels and components such as Alerts.

The class name icon-ui sets the stroke width and default dimensions for UI icons. The width and height for these icons will match the base font size for each major viewport (1rem). Custom sizing can be achieved using icon size utility classes described below.

When using the Lucide icon SVG sprite included with Opportunity Standard, icon IDs a reprefixed with #lucide- followed by the name of the individual file in the library.

The Lucide icon library is a fork of the Feather icon collection, which was the previous UI icon set used by the Opportunity Standard. Currently, Lucide is more actively maintained and provides an expanded icon set that can be integrated independently into different projects based on React, Vue.js, Angular, Svelte, etc.

The Opportunity Standard includes 3 custom UI icons which are not available in the Feather icon collection.

There are counterparts in the Lucide open source library for accessibility and languages, and user. However, they are less than the custom options.

To modify the display size of the icons, use the icon size utilities. The dimensions are multiples of the value of --nyco-grid which is 8px.