Icons

Program Category Icons

Source: src/elements/icons/icons-program-category

These icons are specific to certain types of programs that can be found on ACCESS NYC. The duotone color palette can be set by a text color utility (primary) and fill color utility (secondary). For example; text-blue-bright fill-blue-light.

icon cash expenses v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-cash-expenses-v2-title">icon cash expenses v2</title>
  <use xlink:href="#icon-cash-expenses-v2"></use>
</svg>

icon child care v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-child-care-v2-title">icon child care v2</title>
  <use xlink:href="#icon-child-care-v2"></use>
</svg>

icon city id card v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-city-id-card-v2-title">icon city id card v2</title>
  <use xlink:href="#icon-city-id-card-v2"></use>
</svg>

icon education v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-education-v2-title">icon education v2</title>
  <use xlink:href="#icon-education-v2"></use>
</svg>

icon enrichment v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-enrichment-v2-title">icon enrichment v2</title>
  <use xlink:href="#icon-enrichment-v2"></use>
</svg>

icon family services v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-family-services-v2-title">icon family services v2</title>
  <use xlink:href="#icon-family-services-v2"></use>
</svg>

icon food v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-food-v2-title">icon food v2</title>
  <use xlink:href="#icon-food-v2"></use>
</svg>

icon health v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-health-v2-title">icon health v2</title>
  <use xlink:href="#icon-health-v2"></use>
</svg>

icon housing v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-housing-v2-title">icon housing v2</title>
  <use xlink:href="#icon-housing-v2"></use>
</svg>

icon people with disabilities v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-people-with-disabilities-v2-title">icon people with disabilities v2</title>
  <use xlink:href="#icon-people-with-disabilities-v2"></use>
</svg>

icon work v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-work-v2-title">icon work v2</title>
  <use xlink:href="#icon-work-v2"></use>
</svg>

Program Card Icons

Source: src/elements/icons/icons-program-card

These icons are used inside of Card Component to categorize different types of programs. The duotone color palette can be set by a text color utility (primary) and fill color utility (secondary). For example; text-blue-bright fill-blue-light.

icon card cash expenses v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-cash-expenses-v2-title">icon card cash expenses v2</title>
  <use xlink:href="#icon-card-cash-expenses-v2"></use>
</svg>

icon card child care v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-child-care-v2-title">icon card child care v2</title>
  <use xlink:href="#icon-card-child-care-v2"></use>
</svg>

icon card city id card v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-city-id-card-v2-title">icon card city id card v2</title>
  <use xlink:href="#icon-card-city-id-card-v2"></use>
</svg>

icon card education v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-education-v2-title">icon card education v2</title>
  <use xlink:href="#icon-card-education-v2"></use>
</svg>

icon card enrichment v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-enrichment-v2-title">icon card enrichment v2</title>
  <use xlink:href="#icon-card-enrichment-v2"></use>
</svg>

icon card family services v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-family-services-v2-title">icon card family services v2</title>
  <use xlink:href="#icon-card-family-services-v2"></use>
</svg>

icon card food v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-food-v2-title">icon card food v2</title>
  <use xlink:href="#icon-card-food-v2"></use>
</svg>

icon card health v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-health-v2-title">icon card health v2</title>
  <use xlink:href="#icon-card-health-v2"></use>
</svg>

icon card housing v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-housing-v2-title">icon card housing v2</title>
  <use xlink:href="#icon-card-housing-v2"></use>
</svg>

icon card people with disabilities v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-people-with-disabilities-v2-title">icon card people with disabilities v2</title>
  <use xlink:href="#icon-card-people-with-disabilities-v2"></use>
</svg>

icon card work v2

<svg class="icon-6 text-blue-bright fill-blue-light">
  <title id="icon-card-work-v2-title">icon card work v2</title>
  <use xlink:href="#icon-card-work-v2"></use>
</svg>

Checklist Category Icons

Source: src/elements/icons/icons-checklist

These icons are specific to certain kinds of documents needed for applying to specific programs. See the Checklist Component for details. 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

<div class="bg-icon-application"></div>

icon badge

<div class="bg-icon-badge"></div>

icon calendar

<div class="bg-icon-calendar"></div>

icon flag

<div class="bg-icon-flag"></div>

icon generic

<div class="bg-icon-generic"></div>

icon check

<div class="bg-icon-check"></div>

Logos

Source: src/elements/icons/icons-logo

The primary color can be set by a text color utility. For example; text-blue-dark. The NYC mark is a trademark and service mark of the City of New York. See the section IV. INTELLECTUAL PROPERTY in the nyc.gov terms of service.

icon logo full

<svg class="icon-logo-full text-blue-dark">
  <title id="icon-logo-full-title">icon logo full</title>
  <use xlink:href="#icon-logo-full"></use>
</svg>

icon logo full large

<svg class="icon-logo-full--large text-blue-dark">
  <title id="icon-logo-full--large-title">icon logo full large</title>
  <use xlink:href="#icon-logo-full"></use>
</svg>

icon logo mark

<svg class="icon-logo-mark text-blue-dark">
  <title id="icon-logo-mark-title">icon logo mark</title>
  <use xlink:href="#icon-logo-mark"></use>
</svg>

icon logo nyc

<svg class="icon-logo-nyc text-blue-dark">
  <title id="icon-logo-nyc-title">icon logo nyc</title>
  <use xlink:href="#icon-logo-nyc"></use>
</svg>

Status Icons

Source: src/elements/icons/icons-status

icon info

<svg class="icon-4 text-blue-dark">
  <title id="icon-info-title">icon info</title>
  <use xlink:href="#icon-info"></use>
</svg>

icon success

<svg class="icon-4 text-blue-dark">
  <title id="icon-success-title">icon success</title>
  <use xlink:href="#icon-success"></use>
</svg>

icon urgent

<svg class="icon-4 text-blue-dark">
  <title id="icon-urgent-title">icon urgent</title>
  <use xlink:href="#icon-urgent"></use>
</svg>

icon warning

<svg class="icon-4 text-blue-dark">
  <title id="icon-warning-title">icon warning</title>
  <use xlink:href="#icon-warning"></use>
</svg>

UI Icons

Source: src/elements/icons/icons-ui

ACCESS NYC integrates the Feather open source icons. By default these icons are 24px by 24px. The primary color can be set by a text color utility. For example; text-blue-dark.

icon ui bell

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-bell-title">icon ui bell</title>
  <use xlink:href="#icon-ui-bell"></use>
</svg>

icon ui bookmark

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-bookmark-title">icon ui bookmark</title>
  <use xlink:href="#icon-ui-bookmark"></use>
</svg>

icon ui calendar

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-calendar-title">icon ui calendar</title>
  <use xlink:href="#icon-ui-calendar"></use>
</svg>

icon ui check circle

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-check-circle-title">icon ui check circle</title>
  <use xlink:href="#icon-ui-check-circle"></use>
</svg>

icon ui check square

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-check-square-title">icon ui check square</title>
  <use xlink:href="#icon-ui-check-square"></use>
</svg>

icon ui check

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-check-title">icon ui check</title>
  <use xlink:href="#icon-ui-check"></use>
</svg>

icon ui chevron down

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-chevron-down-title">icon ui chevron down</title>
  <use xlink:href="#icon-ui-chevron-down"></use>
</svg>

icon ui chevron left

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-chevron-left-title">icon ui chevron left</title>
  <use xlink:href="#icon-ui-chevron-left"></use>
</svg>

icon ui chevron right

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-chevron-right-title">icon ui chevron right</title>
  <use xlink:href="#icon-ui-chevron-right"></use>
</svg>

icon ui chevron up

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-chevron-up-title">icon ui chevron up</title>
  <use xlink:href="#icon-ui-chevron-up"></use>
</svg>

icon ui copy

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-copy-title">icon ui copy</title>
  <use xlink:href="#icon-ui-copy"></use>
</svg>

icon ui external link

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-external-link-title">icon ui external link</title>
  <use xlink:href="#icon-ui-external-link"></use>
</svg>

icon ui facebook

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-facebook-title">icon ui facebook</title>
  <use xlink:href="#icon-ui-facebook"></use>
</svg>

icon ui mail

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-mail-title">icon ui mail</title>
  <use xlink:href="#icon-ui-mail"></use>
</svg>

icon ui message circle

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-message-circle-title">icon ui message circle</title>
  <use xlink:href="#icon-ui-message-circle"></use>
</svg>

icon ui minus circle

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-minus-circle-title">icon ui minus circle</title>
  <use xlink:href="#icon-ui-minus-circle"></use>
</svg>

icon ui navigation

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-navigation-title">icon ui navigation</title>
  <use xlink:href="#icon-ui-navigation"></use>
</svg>

icon ui plus circle

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-plus-circle-title">icon ui plus circle</title>
  <use xlink:href="#icon-ui-plus-circle"></use>
</svg>

icon ui printer

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-printer-title">icon ui printer</title>
  <use xlink:href="#icon-ui-printer"></use>
</svg>

icon ui rss

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-rss-title">icon ui rss</title>
  <use xlink:href="#icon-ui-rss"></use>
</svg>

icon ui search

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-search-title">icon ui search</title>
  <use xlink:href="#icon-ui-search"></use>
</svg>

icon ui send

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-send-title">icon ui send</title>
  <use xlink:href="#icon-ui-send"></use>
</svg>

icon ui settings

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-settings-title">icon ui settings</title>
  <use xlink:href="#icon-ui-settings"></use>
</svg>

icon ui share

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-share-title">icon ui share</title>
  <use xlink:href="#icon-ui-share"></use>
</svg>

icon ui share 2

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-share-2-title">icon ui share 2</title>
  <use xlink:href="#icon-ui-share-2"></use>
</svg>

icon ui thumbs down

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-thumbs-down-title">icon ui thumbs down</title>
  <use xlink:href="#icon-ui-thumbs-down"></use>
</svg>

icon ui thumbs up

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-thumbs-up-title">icon ui thumbs up</title>
  <use xlink:href="#icon-ui-thumbs-up"></use>
</svg>

icon ui translate

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-translate-title">icon ui translate</title>
  <use xlink:href="#icon-ui-translate"></use>
</svg>

icon ui twitter

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-twitter-title">icon ui twitter</title>
  <use xlink:href="#icon-ui-twitter"></use>
</svg>

icon ui user check

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-user-check-title">icon ui user check</title>
  <use xlink:href="#icon-ui-user-check"></use>
</svg>

icon ui x circle

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-x-circle-title">icon ui x circle</title>
  <use xlink:href="#icon-ui-x-circle"></use>
</svg>

icon ui x

<svg class="icon-ui icon-4 text-blue-dark">
  <title id="icon-ui-x-title">icon ui x</title>
  <use xlink:href="#icon-ui-x"></use>
</svg>

Icon Usage

The SVG Sprite

To use the inline SVGS, include the main icon sprite (dist/svgs/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:

<script src="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/scripts/access-nyc.js"></script>

<script>
  var patterns = new AccessNyc();

  patterns.icons();
</script>

The script expects the icon sprite path to be svg/icons.svg in the root directory of your site. Pass a new string to the method to specify a different path;

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

Or use a cdn path;

patterns.icons('https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/svg/icons.svg');

Module Import

The Icon source exists in the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to import the module.

// ES6
import Icons from '@nycopportunity/patterns-framework/src/utilities/icons/icons';

new Icons();

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-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="svg/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.

Subway Icons

Source: src/elements/icons/icons-subway

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

A C E

Trunkeighth-avenue

sixth avenue

B D F M

Trunksixth-avenue

crosstown

Trunkcrosstown

canarsie

Trunkcanarsie

nassau

J Z

Trunknassau

broadway

N Q R W

Trunkbroadway

broadway seventh avenue

1 2 3

Trunkbroadway-seventh-avenue

lexington avenue

4 5 6 6

Trunklexington-avenue

flushing

7 7

Trunkflushing

shuttles

Trunkshuttles