Patterns

2.3.2

Icons

#icon-ui-activity
#icon-ui-airplay
#icon-ui-alert-circle
#icon-ui-alert-octagon
#icon-ui-alert-triangle
#icon-ui-align-center
#icon-ui-align-justify
#icon-ui-align-left
#icon-ui-align-right
#icon-ui-anchor
#icon-ui-aperture
#icon-ui-archive
#icon-ui-arrow-down-circle
#icon-ui-arrow-down-left
#icon-ui-arrow-down-right
#icon-ui-arrow-down
#icon-ui-arrow-left-circle
#icon-ui-arrow-left
#icon-ui-arrow-right-circle
#icon-ui-arrow-right
#icon-ui-arrow-up-circle
#icon-ui-arrow-up-left
#icon-ui-arrow-up-right
#icon-ui-arrow-up
#icon-ui-at-sign
#icon-ui-award
#icon-ui-bar-chart-2
#icon-ui-bar-chart
#icon-ui-battery-charging
#icon-ui-battery
#icon-ui-bell-off
#icon-ui-bell
#icon-ui-bluetooth
#icon-ui-bold
#icon-ui-book-open
#icon-ui-book
#icon-ui-bookmark
#icon-ui-box
#icon-ui-briefcase
#icon-ui-calendar
#icon-ui-camera-off
#icon-ui-camera
#icon-ui-cast
#icon-ui-check-circle
#icon-ui-check-navy
#icon-ui-check-red
#icon-ui-check-square
#icon-ui-check-white
#icon-ui-check
#icon-ui-chevron-down-navy
#icon-ui-chevron-down-red
#icon-ui-chevron-down-white
#icon-ui-chevron-down
#icon-ui-chevron-left
#icon-ui-chevron-right
#icon-ui-chevron-up
#icon-ui-chevrons-down
#icon-ui-chevrons-left
#icon-ui-chevrons-right
#icon-ui-chevrons-up
#icon-ui-chrome
#icon-ui-circle
#icon-ui-clipboard
#icon-ui-clock
#icon-ui-cloud-drizzle
#icon-ui-cloud-lightning
#icon-ui-cloud-off
#icon-ui-cloud-rain
#icon-ui-cloud-snow
#icon-ui-cloud
#icon-ui-code
#icon-ui-codepen
#icon-ui-codesandbox
#icon-ui-coffee
#icon-ui-columns
#icon-ui-command
#icon-ui-compass
#icon-ui-copy
#icon-ui-corner-down-left
#icon-ui-corner-down-right
#icon-ui-corner-left-down
#icon-ui-corner-left-up
#icon-ui-corner-right-down
#icon-ui-corner-right-up
#icon-ui-corner-up-left
#icon-ui-corner-up-right
#icon-ui-cpu
#icon-ui-credit-card
#icon-ui-crop
#icon-ui-crosshair
#icon-ui-database
#icon-ui-delete
#icon-ui-disc
#icon-ui-dollar-sign
#icon-ui-download-cloud
#icon-ui-download
#icon-ui-droplet
#icon-ui-edit-2
#icon-ui-edit-3
#icon-ui-edit
#icon-ui-external-link
#icon-ui-eye-off
#icon-ui-eye
#icon-ui-facebook
#icon-ui-fast-forward
#icon-ui-feather
#icon-ui-figma
#icon-ui-file-minus
#icon-ui-file-plus
#icon-ui-file-text
#icon-ui-file
#icon-ui-film
#icon-ui-filter
#icon-ui-flag
#icon-ui-folder-minus
#icon-ui-folder-plus
#icon-ui-folder
#icon-ui-framer
#icon-ui-frown
#icon-ui-gift
#icon-ui-git-branch
#icon-ui-git-commit
#icon-ui-git-merge
#icon-ui-git-pull-request
#icon-ui-github
#icon-ui-gitlab
#icon-ui-globe
#icon-ui-grid
#icon-ui-hard-drive
#icon-ui-hash
#icon-ui-headphones
#icon-ui-heart
#icon-ui-help-circle
#icon-ui-hexagon
#icon-ui-home
#icon-ui-image
#icon-ui-inbox
#icon-ui-info
#icon-ui-instagram
#icon-ui-italic
#icon-ui-key
#icon-ui-layers
#icon-ui-layout
#icon-ui-life-buoy
#icon-ui-link-2
#icon-ui-link
#icon-ui-linkedin
#icon-ui-list
#icon-ui-loader
#icon-ui-lock
#icon-ui-log-in
#icon-ui-log-out
#icon-ui-mail
#icon-ui-map-pin
#icon-ui-map
#icon-ui-maximize-2
#icon-ui-maximize
#icon-ui-meh
#icon-ui-menu
#icon-ui-message-circle
#icon-ui-message-square
#icon-ui-mic-off
#icon-ui-mic
#icon-ui-minimize-2
#icon-ui-minimize
#icon-ui-minus-circle
#icon-ui-minus-square
#icon-ui-minus
#icon-ui-monitor
#icon-ui-moon
#icon-ui-more-horizontal
#icon-ui-more-vertical
#icon-ui-mouse-pointer
#icon-ui-move
#icon-ui-music
#icon-ui-navigation-2
#icon-ui-navigation
#icon-ui-octagon
#icon-ui-package
#icon-ui-paperclip
#icon-ui-pause-circle
#icon-ui-pause
#icon-ui-pen-tool
#icon-ui-percent
#icon-ui-phone-call
#icon-ui-phone-forwarded
#icon-ui-phone-incoming
#icon-ui-phone-missed
#icon-ui-phone-off
#icon-ui-phone-outgoing
#icon-ui-phone
#icon-ui-pie-chart
#icon-ui-play-circle
#icon-ui-play
#icon-ui-plus-circle
#icon-ui-plus-square
#icon-ui-plus
#icon-ui-pocket
#icon-ui-power
#icon-ui-printer
#icon-ui-radio
#icon-ui-refresh-ccw
#icon-ui-refresh-cw
#icon-ui-repeat
#icon-ui-rewind
#icon-ui-rotate-ccw
#icon-ui-rotate-cw
#icon-ui-rss
#icon-ui-save
#icon-ui-scissors
#icon-ui-search
#icon-ui-send
#icon-ui-server
#icon-ui-settings
#icon-ui-share-2
#icon-ui-share
#icon-ui-shield-off
#icon-ui-shield
#icon-ui-shopping-bag
#icon-ui-shopping-cart
#icon-ui-shuffle
#icon-ui-sidebar
#icon-ui-skip-back
#icon-ui-skip-forward
#icon-ui-slack
#icon-ui-slash
#icon-ui-sliders
#icon-ui-smartphone
#icon-ui-smile
#icon-ui-speaker
#icon-ui-square
#icon-ui-star
#icon-ui-stop-circle
#icon-ui-sun
#icon-ui-sunrise
#icon-ui-sunset
#icon-ui-tablet
#icon-ui-tag
#icon-ui-target
#icon-ui-terminal
#icon-ui-thermometer
#icon-ui-thumbs-down
#icon-ui-thumbs-up
#icon-ui-toggle-left
#icon-ui-toggle-right
#icon-ui-tool
#icon-ui-trash-2
#icon-ui-trash
#icon-ui-trello
#icon-ui-trending-down
#icon-ui-trending-up
#icon-ui-triangle
#icon-ui-truck
#icon-ui-tv
#icon-ui-twitch
#icon-ui-twitter
#icon-ui-type
#icon-ui-umbrella
#icon-ui-underline
#icon-ui-unlock
#icon-ui-upload-cloud
#icon-ui-upload
#icon-ui-user-check
#icon-ui-user-minus
#icon-ui-user-plus
#icon-ui-user-x
#icon-ui-user
#icon-ui-users
#icon-ui-video-off
#icon-ui-video
#icon-ui-voicemail
#icon-ui-volume-1
#icon-ui-volume-2
#icon-ui-volume-x
#icon-ui-volume
#icon-ui-watch
#icon-ui-wifi-off
#icon-ui-wifi
#icon-ui-wind
#icon-ui-x-circle
#icon-ui-x-octagon
#icon-ui-x-square
#icon-ui-x
#icon-ui-youtube
#icon-ui-zap-off
#icon-ui-zap
#icon-ui-zoom-in
#icon-ui-zoom-out

UI Icons

NYCO Patterns integrates the Feather open source icon set for user interface icons. By default these icons are 24px by 24px.

Icon Usage

The SVG Sprite

To use the inline SVGS, include the main icon sprite (dist/icons.svg) in your page markup. NYCO Patterns 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 NYCO Patterns Patterns script use the following code:

var nyco = new NycoPatterns();
nyco.icons();

The script expects the icon sprite path to be ./icons.svg (relative to the displayed page). To overwrite this, pass a path to the method:

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

The ES6 and IFFE modules all require instantiation in your main script:

import Icons from 'src/elements/icons/icons';
new Icons();
// or
new Icons('path/to/icons.svg');

This uses the fetch method which will require a polyfill for IE11 (and other older browser) support. The script does not ship with a polyfill by default. See Polyfill.io for a suitable polyfill.

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-nyco icon-xlarge text-color-blue-dark" role="img">
  <title id="icon-logo-nyco-title">The NYC Opportunity Logo</title>
  <use xlink:href="#icon-logo-nyco"></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-nyco" role="img" alt="The NYC Opportunity 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-nyco.svg" alt="The NYC Opportunity Logo">

Icon sizes

To manage the size of the icons, use the icon size utilities. The dimensions are based on the 8px grid and include the following sizes;

Class Dimensions
icon-1 8px 8px
icon-2 16px 16px
icon-3 24px 24px
icon-4 32px 32px
icon-5 40px 40px
icon-6 48px 48px
icon-7 56px 56px
icon-8 64px 64px
icon-9 72px 72px
icon-10 80px 80px
icon-11 88px 88px
icon-12 96px 96px
icon-large 136px 136px
icon-xlarge 256px 256px

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.