or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-icons.mdicon-components.mdindex.mdtheming.md
tile.json

tessl/npm-grommet-icons

Comprehensive React icon library with 639+ SVG icons designed for Grommet applications and general React projects, featuring theming support, accessibility, and customizable sizing.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/grommet-icons@4.14.x

To install, run

npx @tessl/cli install tessl/npm-grommet-icons@4.14.0

index.mddocs/

Grommet Icons

Grommet Icons is a comprehensive React icon library providing 639+ SVG-based icons designed for Grommet applications and general React.js projects. It features theming support, accessibility, customizable sizing, and seamless integration with styled-components.

Package Information

  • Package Name: grommet-icons
  • Package Type: npm
  • Language: JavaScript/TypeScript (with full type definitions)
  • Installation: npm install grommet-icons or yarn add grommet-icons

Core Imports

import { Facebook, Twitter, Add, Close } from "grommet-icons";

For theming:

import { base, deepMerge, defaultProps, extendDefaultTheme } from "grommet-icons";

For custom icons:

import { Blank } from "grommet-icons";

For utilities (via utils default export):

import utils from "grommet-icons/src/js/utils";
const { isObject, parseMetricToNum, useScaleProps, iconPad, generatePrefix } = utils;

CommonJS:

const { Facebook, Twitter, Add, Close } = require("grommet-icons");

Basic Usage

import React from 'react';
import { Add, Close, Facebook } from 'grommet-icons';

function MyComponent() {
  return (
    <div>
      {/* Basic icon usage */}
      <Add />
      <Close />
      
      {/* With color and size */}
      <Facebook color="plain" />
      <Add size="large" />
      <Close size="xlarge" />
    </div>
  );
}

Architecture

Grommet Icons is built around several key components:

  • Icon Components: 639+ individual React components, each representing a specific icon
  • StyledIcon: Internal base styled-components wrapper that provides theming, sizing, and color support (used by all icon components)
  • Theme System: Integrated theming with customizable colors, sizes, and styling extensions
  • Blank Component: Template for creating custom icons while maintaining consistency
  • TypeScript Support: Complete type definitions for all icons and utilities
  • Accessibility: Built-in ARIA support with customizable accessibility titles

Capabilities

Icon Components

639+ individual React icon components covering UI elements, social media, brands, status indicators, documents, and technical symbols.

interface IconProps {
  a11yTitle?: string;
  color?: string;
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
}

type Icon = React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

// Sample icons - all follow the same pattern
declare const Add: Icon;
declare const Close: Icon;
declare const Facebook: Icon;
declare const Twitter: Icon;
// ... 635+ more icons

Icon Components

Theming and Customization

Theme integration with styled-components for consistent color schemes and sizing across applications.

interface Theme {
  global: {
    colors: {
      icon: string;
      [key: string]: any;
    };
  };
  icon: {
    size: {
      small: string;
      medium: string;
      large: string;
      xlarge: string;
    };
    extend?: any;
  };
}

declare const base: Theme;
declare function deepMerge(target: any, ...sources: any[]): any;
declare const defaultProps: { theme: Theme };
declare function extendDefaultTheme(theme: any): void;

Theming

Custom Icon Creation

Create custom icons using the Blank component while maintaining consistency with the icon system.

declare const Blank: React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

Custom Icons

Utility Functions

Internal utility functions available via the utils default export for advanced customization scenarios.

/**
 * Check if a value is a plain object
 */
declare function isObject(item: any): boolean;

/**
 * Extract numeric value from CSS string (e.g., "24px" -> 24)
 */
declare function parseMetricToNum(string?: string): number;

/**
 * React hook for handling icon stroke scaling at small sizes
 */
declare function useScaleProps(props: { size?: string }): { vectorEffect?: string };

/**
 * Calculate padding for icon alignment with text
 */
declare function iconPad(props: {
  height?: string;
  width?: string;
  size?: string;
}): string;

/**
 * Generate unique ID prefix for SVG elements to avoid collisions
 */
declare function generatePrefix(name: string): string;

These utilities are primarily used internally by the icon system but can be accessed for advanced customization:

import utils from "grommet-icons/src/js/utils";
const { parseMetricToNum, isObject } = utils;

// Use parseMetricToNum to extract numeric values
const numericSize = parseMetricToNum("24px"); // 24

Common Icon Categories

Navigation & UI: Add, Close, Menu, More, Search, Filter, Next, Previous, Up, Down, CaretUp, CaretDown, CaretLeftFill, CaretRightFill

Status & Indicators: StatusGood, StatusCritical, StatusWarning, StatusInfo, Checkmark, Alert, CircleInformation, CircleAlert

Social & Brands: Facebook, Twitter, Instagram, LinkedIn, Github, Google, Apple, Microsoft, Amazon, Netflix

Documents & Files: Document, DocumentPdf, DocumentExcel, DocumentWord, Folder, FolderOpen, Archive, Download, Upload

System & Technology: Server, Database, Cloud, Network, Docker, Kubernetes, Linux, Windows, Android, Apple

Types

interface IconProps {
  /** Accessibility title for screen readers */
  a11yTitle?: string;
  /** Icon color - theme color name or CSS color value */
  color?: string;
  /** Icon size - predefined size or custom CSS value */
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
}

type Icon = React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

interface Theme {
  global: {
    colors: {
      icon: string;
      [key: string]: any;
    };
  };
  icon: {
    size: {
      small: string;
      medium: string;
      large: string;
      xlarge: string;
    };
    extend?: any;
  };
}