Skip to main content

Patterns

Icons

These icons are specific to certain types of programs that can be found on ACCESS NYC.

icon cash expenses

xlink:href#icon-cash-expenses

icon child care

xlink:href#icon-child-care

icon city id card

xlink:href#icon-city-id-card

icon education

xlink:href#icon-education

icon enrichment

xlink:href#icon-enrichment

icon family services

xlink:href#icon-family-services

icon food

xlink:href#icon-food

icon health

xlink:href#icon-health

icon housing

xlink:href#icon-housing

icon people with disabilities

xlink:href#icon-people-with-disabilities

icon work

xlink:href#icon-work

icon card cash expenses

xlink:href#icon-card-cash-expenses

icon card child care

xlink:href#icon-card-child-care

icon card city id card

xlink:href#icon-card-city-id-card

icon card education

xlink:href#icon-card-education

icon card enrichment

xlink:href#icon-card-enrichment

icon card expenses

xlink:href#icon-card-expenses

icon card family services

xlink:href#icon-card-family-services

icon card food

xlink:href#icon-card-food

icon card health

xlink:href#icon-card-health

icon card housing

xlink:href#icon-card-housing

icon card people with disabilities

xlink:href#icon-card-people-with-disabilities

icon card work

xlink:href#icon-card-work

 

These icons are specific to certain kinds of documents needed for applying to specific programs. If there is no icon associated with the requirement, it defaults to displaying a checkmark. These icons can only be implemented using the "Background Image" method described below.

icon application

selector.bg-icon-application

icon badge

selector.bg-icon-badge

icon calendar

selector.bg-icon-calendar

icon flag

selector.bg-icon-flag

icon generic

selector.bg-icon-generic

icon check

selector.bg-icon-check

 

icon logo full

xlink:href#icon-logo-full

icon logo full large

xlink:href#icon-logo-full--large

icon logo mark

xlink:href#icon-logo-mark

icon logo nyc

xlink:href#icon-logo-nyc

 

icon ui alert octagon

xlink:href#icon-ui-alert-octagon

icon ui alert triangle

xlink:href#icon-ui-alert-triangle

icon ui calendar

xlink:href#icon-ui-calendar

icon ui check circle

xlink:href#icon-ui-check-circle

icon ui check

xlink:href#icon-ui-check

icon ui chevron down

xlink:href#icon-ui-chevron-down

icon ui chevron left

xlink:href#icon-ui-chevron-left

icon ui chevron right

xlink:href#icon-ui-chevron-right

icon ui chevron up

xlink:href#icon-ui-chevron-up

icon ui info

xlink:href#icon-ui-info

icon ui mail

xlink:href#icon-ui-mail

icon ui message circle

xlink:href#icon-ui-message-circle

icon ui minus circle

xlink:href#icon-ui-minus-circle

icon ui plus circle

xlink:href#icon-ui-plus-circle

icon ui printer

xlink:href#icon-ui-printer

icon ui search

xlink:href#icon-ui-search

icon ui settings

xlink:href#icon-ui-settings

icon ui user check

xlink:href#icon-ui-user-check

icon ui x circle

xlink:href#icon-ui-x-circle

icon ui x

xlink:href#icon-ui-x

 

The SVG Sprite

To use the inline SVGS, include the main icon sprite (dist/icons.svg) in your page markup. ACCESS NYC uses an AJAX method to cache the sprite file while not including it in the page cache to decrease the size of each page. To import the icon through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/access-nyc.js"></script>

<script>
  var access = new AccessNyc();
  access.icons();
</script>

The script expects the icon sprite path to be named icons.svg and live in the root directory of the site. To overwrite this, pass a path to the method:

access.icons('path/to/icons.svg');

The ES6, CommonJS, and IFFE modules all require global activation to be written into your main script:

// ES6
import Filter from 'src/utilities/icons/icons';

// CommonJS
let Filter = require('dist/utilities/icons/icons.common');

<!-- IFFE -->
<script src="dist/utilities/icons/icons.iffe.js"></script>

new Icons(); // or new Icons('path/to/icons.svg');

Note: The Icon Utility source and distribution scripts in the ACCESS NYC Patterns has been deprecated and moved to the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to use this script.

Polyfills

The script uses the Fetch method which requires a polyfill for IE11 support. See the "Polyfills" section in the Installation docs for recommendations.

Markup

There are a few options for using icons after the sprite has been loaded on the page:

Inline SVG’s

The first option allows you to inline an SVG with the use tag. This is the preferred method for ACCESS NYC. Note that you can change the color of inline SVG icon shapes that have their fill set as currentColor by using a text color utility. Also, note the role="img" attribute, title tag, and title tag id for accessibility support.

<svg class="icon-logo-full text-color-blue-dark" role="img">
  <title id="icon-logo-full-title">ACCESS NYC Logo</title>
  <use xlink:href="#icon-logo-full"></use>
</svg>
Background Images

The second option does not require the icon sprite to be added to the page through the JavaScript module. It uses background images that reference the icons on the CDN. This option uses a utility class that sets the background image of the icon .bg-< Icon ID Here >. Icons with background images require less markup but their shape fill color will default to black or whatever fill color the shape is set to. Note the role="img" and alt text attributes for accessibility.

<div class="icon-logo-full" role="img" alt="The ACCESS NYC Logo"></div>
img tag

The third option is to use the individual SVG path as a source attribute in an image tag. Note the alt text attribute for accessibility.

<img src="svgs/icon-logo-full.svg" alt="The ACCESS NYC Logo">

Accessibility Note: If the SVG graphic doesn't serve a function, it may not be useful to screen readers. Therefore, it may be hidden using the aria-hidden="true" attribute.

The Subway icon set is a group of CSS only icons. The color of the icon is set with the background color utility bg- with a name that follows the primary trunk line nomenclature, ex: bg-<trunk>.

<span class="icon-subway bg-lexington-avenue">6</span>

For express stops, the border color utility border-<trunk> is set instead of the background.

<span class="icon-subway icon-subway-express border-lexington-avenue">6<span>

eighth avenue

ACE

Trunkeighth-avenue

sixth avenue

BDFM

Trunksixth-avenue

crosstown

G

Trunkcrosstown

canarsie

L

Trunkcanarsie

nassau

JZ

Trunknassau

broadway

NQRW

Trunkbroadway

broadway seventh avenue

123

Trunkbroadway-seventh-avenue

lexington avenue

4566Express

Trunklexington-avenue

flushing

77Express

Trunkflushing

shuttles

S

Trunkshuttles