or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-keystone-ui--icons

A comprehensive React icon library providing 286 individual SVG icon components, built on Feather Icons with TypeScript support and responsive sizing

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@keystone-ui/icons@5.0.x

To install, run

npx @tessl/cli install tessl/npm-keystone-ui--icons@5.0.0

index.mddocs/

Keystone UI Icons

Keystone UI Icons is a comprehensive React icon library providing 286 individual SVG icon components. Built on Feather Icons, it offers TypeScript support, responsive sizing capabilities, and seamless integration with the Keystone UI design system. Each icon is optimized for performance with proper accessibility attributes and customizable appearance.

Package Information

  • Package Name: @keystone-ui/icons
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @keystone-ui/icons

Core Imports

import { ActivityIcon, IconProps } from "@keystone-ui/icons";

For multiple icons:

import { 
  HomeIcon, 
  UserIcon, 
  SettingsIcon, 
  SearchIcon 
} from "@keystone-ui/icons";

CommonJS:

const { HomeIcon, UserIcon, SettingsIcon } = require("@keystone-ui/icons");

Basic Usage

import React from "react";
import { HomeIcon, UserIcon, SettingsIcon } from "@keystone-ui/icons";

function App() {
  return (
    <div>
      {/* Basic usage with default size (medium = 24px) */}
      <HomeIcon />
      
      {/* Custom size using predefined tokens */}
      <UserIcon size="large" />
      
      {/* Custom color */}
      <SettingsIcon color="#3366cc" />
      
      {/* Custom numeric size */}
      <HomeIcon size={32} />
      
      {/* With additional SVG attributes */}
      <UserIcon 
        size="small" 
        color="red"
        className="my-icon"
        onClick={() => console.log("clicked")}
      />
    </div>
  );
}

Architecture

Keystone UI Icons is built around several key components:

  • Base Icon System: createIcon utility function that generates consistent React components with proper TypeScript types
  • Size Mapping: Built-in responsive size system with predefined tokens (small to large) and custom numeric support
  • SVG Optimization: Each icon uses optimized SVG with proper accessibility attributes (aria-hidden, role, focusable)
  • Forward Refs: All icons support React refs for direct DOM access
  • Type Safety: Full TypeScript integration with proper prop types and IntelliSense support

Capabilities

Icon Components

286 individual icon components based on Feather Icons, each accepting IconProps for customization.

// Example icon components (all follow the same pattern)
const ActivityIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AirplayIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlertCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlertOctagonIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlertTriangleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlignCenterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlignJustifyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlignLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AlignRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const AnchorIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Navigation and UI Icons
const ArrowDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ArrowLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ArrowRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ArrowUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ChevronDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ChevronLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ChevronRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ChevronUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const HomeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MenuIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Action Icons
const CheckIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const CheckCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const CheckSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const XIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const XCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const XSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PlusCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PlusSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MinusCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MinusSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Media and Content Icons
const PlayIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PlayCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PauseIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PauseCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const StopCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const SkipBackIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const SkipForwardIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const VolumeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const Volume1Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const Volume2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const VolumeXIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Communication Icons
const MailIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MessageCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const MessageSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneCallIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneIncomingIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneOutgoingIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneMissedIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PhoneOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// File and Document Icons
const FileIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FileTextIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FilePlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FileMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FolderIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FolderPlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FolderMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const DownloadIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const DownloadCloudIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UploadIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UploadCloudIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// User and Social Icons
const UserIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UsersIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UserPlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UserMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UserCheckIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UserXIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const HeartIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const StarIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ThumbsUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ThumbsDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Brand Icons
const GithubIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const GitlabIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const TwitterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FacebookIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const InstagramIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const LinkedinIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const YoutubeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const SlackIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const TrelloIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FigmaIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// System and Settings Icons
const SettingsIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ToolIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const CogIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const LockIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const UnlockIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const KeyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ShieldIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const ShieldOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const EyeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const EyeOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Other Essential Icons (additional 200+ icons follow the same pattern)
const SearchIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const FilterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const EditIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const Edit2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const Edit3Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const TrashIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const Trash2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const CopyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const SaveIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const LoaderIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const RefreshCwIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const RefreshCcwIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const PowerIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const LogInIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
const LogOutIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

Complete Icon List (286 icon components):

ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownIcon, ArrowDownCircleIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowLeftCircleIcon, ArrowRightIcon, ArrowRightCircleIcon, ArrowUpIcon, ArrowUpCircleIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChartIcon, BarChart2Icon, BatteryIcon, BatteryChargingIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckIcon, CheckCircleIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudIcon, CloudDrizzleIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideIcon, DivideCircleIcon, DivideSquareIcon, DollarSignIcon, DownloadIcon, DownloadCloudIcon, DribbbleIcon, DropletIcon, EditIcon, Edit2Icon, Edit3Icon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, LinkIcon, Link2Icon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, MaximizeIcon, Maximize2Icon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, Minimize2Icon, MinusIcon, MinusCircleIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, NavigationIcon, Navigation2Icon, OctagonIcon, PackageIcon, PaperclipIcon, PauseIcon, PauseCircleIcon, PenToolIcon, PercentIcon, PhoneIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayIcon, PlayCircleIcon, PlusIcon, PlusCircleIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, ShareIcon, Share2Icon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, TrashIcon, Trash2Icon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadIcon, UploadCloudIcon, UserIcon, UserCheckIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, VolumeIcon, Volume1Icon, Volume2Icon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XIcon, XCircleIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon

Icon Creator Utility

Factory function for creating custom icon components (primarily for internal use).

/**
 * Creates a React icon component with consistent styling and behavior
 * @param children - SVG content for the icon
 * @param name - Display name for the component
 * @returns ForwardRef icon component with IconProps interface
 */
function createIcon(
  children: React.ReactNode, 
  name: string
): React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

Types

interface IconProps extends React.SVGAttributes<SVGSVGElement> {
  /** The color for the SVG stroke property (defaults to currentColor) */
  color?: string;
  /** 
   * The size for the icon. Can be a predefined size token or custom number.
   * Predefined sizes: "small" (16px), "smallish" (20px), "medium" (24px), 
   * "largish" (28px), "large" (32px). Default: "medium"
   */
  size?: ResponsiveProp<"small" | "smallish" | "medium" | "largish" | "large"> | number;
}

// Re-exported from @keystone-ui/core
type ResponsiveProp<T> = T | readonly (T | null)[];

Usage Examples

Basic Icon Usage

import { HomeIcon, UserIcon } from "@keystone-ui/icons";

function Navigation() {
  return (
    <nav>
      <HomeIcon /> Home
      <UserIcon /> Profile
    </nav>
  );
}

Size Variations

import { SettingsIcon } from "@keystone-ui/icons";

function Settings() {
  return (
    <div>
      <SettingsIcon size="small" />   {/* 16px */}
      <SettingsIcon size="medium" />  {/* 24px - default */}
      <SettingsIcon size="large" />   {/* 32px */}
      <SettingsIcon size={40} />      {/* Custom size */}
    </div>
  );
}

Responsive Sizing

import { MenuIcon } from "@keystone-ui/icons";

function Header() {
  return (
    <MenuIcon 
      size={["small", "medium", "large"]}
    />
  );
}

Custom Styling

import { SearchIcon } from "@keystone-ui/icons";

function SearchButton() {
  const searchRef = useRef<SVGSVGElement>(null);
  
  return (
    <button>
      <SearchIcon
        ref={searchRef}
        color="#0066cc"
        size="smallish"
        className="search-icon"
        style={{ marginRight: '8px' }}
      />
      Search
    </button>
  );
}

Dynamic Icons

import { PlayIcon, PauseIcon } from "@keystone-ui/icons";

function MediaPlayer({ isPlaying }: { isPlaying: boolean }) {
  const IconComponent = isPlaying ? PauseIcon : PlayIcon;
  
  return (
    <button>
      <IconComponent size="medium" color="white" />
    </button>
  );
}