@nice2dev/icons-tech

React icon library for developer tools, cloud computing, infrastructure, and programming concepts.

Installation

pnpm add @nice2dev/icons-tech

Features

• 🛠️ 60 Tech Icons — DevTools, Cloud, Infrastructure, Development
• 🎨 Variants — Filled, Outlined, Duotone styles
• ✨ Animations — 9 SMIL-based animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 📦 Tree-shakeable — Import only what you need
• 🔷 TypeScript — Full type definitions
• ⚛️ React 19 — Latest React support

Usage

import { TerminalIcon, DockerIcon, DatabaseIcon, TypeIcon } from '@nice2dev/icons-tech';

function App() {
  return (
    <div>
      <TerminalIcon size={24} color="#22c55e" />
      <DockerIcon variant="filled" accentColor="#2496ed" />
      <DatabaseIcon animation="pulse" />
      <TypeIcon size={32} accentColor="#3178c6" />
    </div>
  );
}

Available Icons

DevTools (15 icons)

| Icon | Component | | ---------- | --------------- | | Terminal | TerminalIcon | | Code | CodeIcon | | Git Branch | GitBranchIcon | | Git Commit | GitCommitIcon | | Git Merge | GitMergeIcon | | Bug | BugIcon | | Debug | DebugIcon | | Console | ConsoleIcon | | API | APIIcon | | JSON | JSONIcon | | Regex | RegexIcon | | NPM | NPMIcon | | Package | PackageIcon | | Build | BuildIcon | | Test | TestIcon |

Cloud (15 icons)

| Icon | Component | | -------------- | ------------------- | | Cloud | CloudIcon | | Cloud Upload | CloudUploadIcon | | Cloud Download | CloudDownloadIcon | | Server | ServerIcon | | Serverless | ServerlessIcon | | CDN | CDNIcon | | Lambda | LambdaIcon | | S3 Bucket | S3BucketIcon | | Kubernetes | KubernetesIcon | | Docker | DockerIcon | | Container | ContainerIcon | | Microservice | MicroserviceIcon | | Load Balancer | LoadBalancerIcon | | Firewall | FirewallIcon | | VPC | VPCIcon |

Infrastructure (15 icons)

| Icon | Component | | ----------------- | ---------------------- | | Database | DatabaseIcon | | Redis | RedisIcon | | Queue | QueueIcon | | Cache | CacheIcon | | Cluster | ClusterIcon | | Node | NodeIcon | | Network | NetworkIcon | | DNS | DNSIcon | | SSL | SSLIcon | | Monitoring | MonitoringIcon | | Logs | LogsIcon | | Metrics | MetricsIcon | | Backup | BackupIcon | | Disaster Recovery | DisasterRecoveryIcon | | CI/CD | CICDIcon |

Development (15 icons)

| Icon | Component | | --------- | ----------------- | | Variable | VariableIcon | | Function | FunctionDevIcon | | Class | ClassIcon | | Interface | InterfaceIcon | | Module | ModuleIcon | | Component | ComponentIcon | | Hook | HookIcon | | State | StateIcon | | Props | PropsIcon | | Event | EventIcon | | Async | AsyncIcon | | Promise | PromiseIcon | | Stream | StreamIcon | | Type | TypeIcon | | Enum | EnumIcon |

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------- | ---------------- | ----------------------- | | size | number | 24 | Icon size in pixels | | color | string | 'currentColor' | Primary icon color | | accentColor | string | — | Secondary/accent color | | variant | 'filled' \| 'outlined' \| 'duotone' | 'outlined' | Icon style variant | | animation | TechIconAnimation | — | Animation type | | className | string | — | CSS class name | | style | CSSProperties | — | Inline styles | | ...props | SVGProps | — | Any valid SVG attribute |

Animations

import { KubernetesIcon } from '@nice2dev/icons-tech';

// Available animations
<KubernetesIcon animation="pulse" />   // Opacity pulse
<KubernetesIcon animation="grow" />    // Scale grow
<KubernetesIcon animation="shake" />   // Horizontal shake
<KubernetesIcon animation="spin" />    // 360° rotation
<KubernetesIcon animation="bounce" />  // Vertical bounce
<KubernetesIcon animation="fade" />    // Fade in/out
<KubernetesIcon animation="flip" />    // Y-axis flip
<KubernetesIcon animation="slide" />   // Horizontal slide
<KubernetesIcon animation="glow" />    // Glow effect (filter)

Icon Collections

import { devToolsIcons, cloudIcons, infrastructureIcons, developmentIcons, allTechIcons } from '@nice2dev/icons-tech';

// Use collections for dynamic rendering
Object.entries(devToolsIcons).map(([name, Icon]) => <Icon key={name} size={24} />);

Custom Icons

Create custom tech icons using the factory:

import { createTechIcon } from '@nice2dev/icons-tech';

const CustomAPIIcon = createTechIcon(
  ({ color, variant }) => (
    <>
      <rect
        x="3"
        y="3"
        width="18"
        height="18"
        rx="2"
        fill={variant === 'filled' ? color : 'none'}
        stroke={color}
        strokeWidth="2"
      />
      <path d="M8 12h8" stroke={variant === 'filled' ? '#fff' : color} strokeWidth="2" />
    </>
  ),
  { displayName: 'CustomAPIIcon' },
);

License

MIT © Nice2Dev