# @nib-styles/v2-icons > Icon font for nib. Latest version **3.4.1** (published 2019-12-02) · 0 weekly downloads ## Install ```sh npm install @nib-styles/v2-icons pnpm add @nib-styles/v2-icons yarn add @nib-styles/v2-icons bun add @nib-styles/v2-icons ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.4.1 | | Published | 2019-12-02 | | First published | 2015-11-19 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 742.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Maintainers | airfan, annmarinas-nib, b.pavan, bang-dius, bchiong, benh, benlowbridge, bennettsolnet, chloewicks, classen, cmayson, dalvarez-nib, dariasu, davidarmstrongnib, dvasiliev, eastwood, ehatricksmith, eniland, footok, garthstevens, gnguyennib, hlee, hlee.dius, hlmartin, ian.darroch, jackmennienib, james_mudbath, jamesrabbitt, jason.huang.nib, jaymillare, jgarland, jirvin, jmatas, john.vaughan, kthomas, lauriejones, matias.urbano, mattbourke, mattstone_nib, micahnap, michaeltroy, mmartinez, mvillegas, narcher, nford_nib, nib-build-agent, nib-noejon, nib-nz-build, nib-styles-admin, nlaw, pmccloghrylaing, rlaldius, roland.molina, rovacsek, samdiamond, scheruvu, sonnymai, stribs, syed.husain, tmcclenahan, tom.mok, ulli, victor.shi, wdvalena, wng-services, wthorne | ## Links - npm: https://www.npmjs.com/package/@nib-styles/v2-icons - Repository: https://github.com/nib-styles/v2-icons - Homepage: https://github.com/nib-styles/v2-icons#readme - Issues: https://github.com/nib-styles/v2-icons/issues - npm.io page: https://npm.io/package/@nib-styles/v2-icons ## Recent versions - 3.4.1 (latest) — 2019-12-02 - 3.2.0-preview.1 (preview) — 2018-02-08 - 3.4.0 — 2018-08-13 - 3.3.0 — 2018-03-07 - 3.2.0 — 2018-02-12 - 3.1.0 — 2017-03-19 - 3.0.0 — 2017-03-05 - 3.0.0-preview.2 — 2017-02-28 - 3.0.0-preview.1 — 2017-02-28 - 2.12.1 — 2017-02-06 - 2.12.0 — 2017-02-06 - 2.11.0 — 2016-11-13 - 2.10.0 — 2016-10-12 - 2.9.1 — 2016-09-20 - 2.9.0 — 2016-09-20 - … 4 more at https://npm.io/package/@nib-styles/v2-icons/versions ## README # v2-icons Icon font for nib. See the [pattern library](https://design.nib.com.au/language/master/#/atom/icon) for a full list of available icons. ## Designing a new icon - Ensure your document profile has "Align New Objects to Pixel Grid" option unchecked in the Advanced section. NOTE: This will only work when creating a new illustrator document. - Your icon *MUST* be a `*.svg` - Your icon *MUST* be 64px by 64px - Your icon *MUST* be black and white - You *SHOULD* make use of the full height of the icon; if you *absolutely* can't make use of the full height of the icon then you *MUST* center the icon vertically - but vertically centered icons may look dodgey in one or two common use cases (see below) - You *MUST* save your icon with [these settings](https://www.npmjs.com/package/gulp-iconfont#preparing-svg-s) ## Naming a new icon - name the icon after what the image is, not what the function is - if the icon is in a circle, use the suffix `-circle` - if the icon is white on black, use the suffix `-inverse` ## Adding a new icon **Before adding your icon, please consult with the designers to ensure the icon is a standard and will be used across the teams!!!** Add your `*.svg` to the `icons/` directory Install the nodejs modules required for building: npm install Run the build script: gulp ### Test Open the `dist/listing.html` file. It will take a while to load. ## Use cases The above rules were chosen in order to meet the following use cases: ### Inline with text ![Icon in a button](doc/use-case-btn.png?raw=true) Where the center of an icon should be in line with the center of some text e.g. an icon in a button. For this to look good icons must be vertically centered or make use of the full height. Icons that are vertically centered rather than using the full height will look smaller than those that are full height. ### Horizontal list ![Icon in a button](doc/use-case-horiz-list.png?raw=true) Where a number of icons are aligned to the top or bottom of a container e.g. a feature panel. For this to look good icons must all be the same height (preferably make use of the full height). ### Vertical list Where a number of icons are aligned to the left or right of a container. For this to look good icons must be horizontally centered or make use of the full width. ## Change log ### 3.4.1 - Add: Font-display to @font-face to make text visible while the font is loading ### 3.4.0 - Add: `glasses`, `smiley` and `arm-around-shoulder` icons ### 3.3.0 - Add: `hospital-building` and `paper-plane` icons ### 3.2.0 - Add: `clipboard` and `receipt-with-inverse-plus` icons ### 3.1.0 - Add: `travel-bag` icon ### 3.0.0 - move `font-family` to its own mixin so its not repeated in CSS each time the mixins are `@import`ed - change the `sass-composer` main file to the `mixins.scss` rather than `compiled.scss` - fix `lightgrey` color to be standard https://github.com/nib-styles/v2-icons/issues/18 - turn off italics so the icon doesn't look skewed https://github.com/nib-styles/v2-icons/issues/17 ### 2.12.1 - Add: `credit-card` icon ### 2.11.0 - Add: PDF icon - Add: certificate icon ### 2.8.0 - Add: added `./dist/metadata.js`: generated metadata for use in JS --- _Source: https://npm.io/package/@nib-styles/v2-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._