How to Use GDS Icon Component

See it in Storybook

List of Display Icons

Install it

npm i @nielsen-media/gds-icons

Use it

import React from "react";
import { createComponent } from "@lit-labs/react";
import Icon from "@nielsen-media/gds-icons/lib/src";

export const IconComponent = createComponent(React, "gds-icon", Icon);

export function GDSIcon(props) {
  return (
    <IconComponent
      icon={props.icon}
      size={props.size}
      mode={props.mode}
      outlined={props.outlined}
      foreground={props.foreground}
      foreground-level={props["foreground-level"]}
      background={props.background}
      background-level={props["background-level"]}
    ></IconComponent>
  );
}

Note: Example using gds-icon inside of a Create React Application. Checkout the list of Display Icons to see whats available OR storybook to see a visual representation.

Component API

| Attribute Name | Attribute Value(s) | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | size | 16, 20, 24, 32, 40, 48, 64 | | outlined | true, false | | foreground | blurple, aqua, gray, eggplant, blue, red, green, yellow, and orange. | | foreground-level | 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | | background | blurple, aqua, gray, eggplant, blue, red, green, yellow, and orange. | | background-level | 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | | mode | light, dark | | icon | active-check, add-circle, add-custom-list, add-document, add-to-levels, add-user, add, amazon, android, anomaly-status, api, app-switcher, apple-logo, archive, arrow-down, arrow-left, arrow-right, arrow-up, attach, attention, bar-chart-horizontal, bar-chart-vertical, bring-back, bring-backward, bring-forward, bring-front, bubble-chart, calculation-addition, calculation-divide, calculation-equal, calculation-greater-than, calculation-less-than, calculation-multiply, calculation-not-equal, calculation-subtract, calendar, camera, caret-down, caret-left, caret-right, caret-up, checkmark, clear-list, close, collaboration, collapse, column, comment, copy, crop, ctv, currency-dollar, currency-euro, currency-pound, current-event, custom-list, cut, dashboard, data-cube, data-grid, data-pipeline, database, databases, delete, desktop-computer, devices, document, download, duplicate, edit, email, ellipsis, error, expand, export, eye-hide, eye-see, favorites, file-csv, file-excel, file-pdf, file-powerpoint, file-sheets, file-slides, file-zip, filter, flag, flat-list, flat-view, folder, full-screen, full-screen-exit, gracenote, grid, group, hamburger-menu, hiking, households, image, inactive, info, laptop-computer, levels, link, lock, logout, marketing-mix, mass-edit, menu, merge, microsoft, move-drag-horizontal, move-drag-vertical, note, notifications, optimize, organization, page-first, page-last, paste, pause, pending, people, phone-mobile, phone, pin, play, print, privacy-shield, question, radio-feed, redo, refresh, report, reset, reset-alt, retail-store, save, scattered-plot, search, selections, send, settings, share, shopping-purchase, similar-segments, soft-select, sort-alpha, spider-chart, split-screen, status-large, status-small, status, story, subtract, sum, support, syndication, tablet, text, throbber, thumb-down, thumb-up, tree, tv, undo, upload, user-circle, user-square, visualization, warning-alert, with-begins, with-ends, work, zoom-in, zoom-out |