You are here:

NYPL Design Toolkit

Version: 0.1.36

SVG Index

Usage

Available arguments attached to @mixin nypl-icon: $background-color: $nypl-white, $border-radius: 0, $fill: $page-text-color, $height: 1em, $inverted-color: $inverted-link-color, $width: 1em

NYPL Logos

The NYPL branding / logos have special use cases. You'll probably have no need to modify the logo other than changing its size. We can use either the logo mark or the logo type. This can be achieved by using css to hide either of these two components.

Example


    .nypl-icon {
      @include nypl-icon($height: 13em, $width: 20em);
    }

Example


    .nypl-icon {
      @include nypl-icon($height: 13em, $width: 20em);
    }

3 Dots

We use these to indicate there is something else to discover

Example

3 Dots Vertical

An alternate representation of the ”more“ signal

Example

Add icon

Example

Add icon with circle

Example

Add icon with circle reverse

Example

Apple icon

In cases where an icon and link to an Apple™ property is required

Example

Applied icon

Where we have a state or button requiring a visual representation of “applied”

Example

Arrow icon

An arrow icon. Use a custom class (in this case: nypl-arrow-icon) use the rotate mixin to transform the direction as needed.

Example


  .nypl-arrow-icon {
    @include rotate(90deg);
  }

Audio icon

Example

Disc disc icon

Where a CD-ROM or Music CD needs representing

Example

Blueray disc icon

Example

CD icon

Example

Check icon

Example

Check icon circle

Example

Check icon reverse

Example

Close

Example

Close with circle

Example

Close with circle reverse

Example

Dash

Icon to represent an icomplete set of activated controls

Example

Dash with circle

Example

Dash with circle reverse

Example

Disc

Example

E-Reader

Example

Envelope

Example

Equal sign

could be used in other contexts, such as a handle for drag and drop UI elements

Example

Exclaim

Could be used in other contexts, such as a handle for drag and drop UI elements

Example

Facebook

Where iconography and linkage to the social network is required

Example

Fastforward

Example

File

Example

Filter

Example

Grid

Example

Hidden

Example

Instagram

Where iconography and linkage to the social network is required

Example

Library card

Example

List

Example

Logged in

An icon representing a logged in state

Example

Log in

An icon representing a logged out state

Example

Log out

Example

Marker

Example

Marker empty

Example

Marker small dot

Example

Menu (Burger)

Example

Library building (neoclassic)

Example

Open book

Example

Pencil

Example

Play

Example

Pushpin

Example

Pyramid

This icon should be used as a directional indicator and transformed w/ css to achieve desired position

Example

Radio button active

Example

Radio button inactive

Example

Reset

Example

Search

Example

Search with circle

Example

Settings

Example

Sound Cloud

Where iconography and linkage to the service is required

Example

Tag

Example

Text

Example

Trash

Example

Tumblr

Where iconography and linkage to the social network is required

Example

Twitter

Where iconography and linkage to the social network is required

Example

Typesize

Example

Unapplied

Example

Visible

Example

Wedge

This icon should be used as a directional indicator and transformed w/ css to achieve desired position

Example

Wedge with circle

This icon should be used as a directional indicator and transformed w/ css to achieve desired position

Example

Wedge with circle reverse

This icon should be used as a directional indicator and transformed w/ css to achieve desired position

Example

Youtube

Where iconography and linkage to the video service is required

Example