@rchernando/tech-icons

430+ technology & brand SVG icons for Angular with real tree-shaking support, light/dark theme variants, and zero runtime dependencies beyond tslib.

All icons are embedded as inline SVGs (no external requests at runtime). The component renders them at any size with crisp vector quality.

Key features

• Tree-shakeable: Import only the icons you use. 5 icons = ~58 KB gzipped. All 430+ icons = ~383 KB gzipped.
• Zero vulnerabilities: Only runtime dependency is tslib ^2.3.0. No transitive dependencies.
• Light/dark variants: Many icons include both theme variants with automatic fallback.
• Angular 16–19: Works with standalone components and NgModule-based apps.

Installation

npm install @rchernando/tech-icons

Quick start

1. Register the icons you need

// app.config.ts (standalone apps)
import { ApplicationConfig } from '@angular/core';
import { provideIcons, angularIcon, reactIcon, typescriptIcon } from '@rchernando/tech-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIcons(angularIcon, reactIcon, typescriptIcon)
  ]
};

2. Use the component

import { Component } from '@angular/core';
import { TechIconsComponent } from '@rchernando/tech-icons';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [TechIconsComponent],
  template: `
    <tech-icon name="angular" size="lg"></tech-icon>
    <tech-icon name="react" size="md"></tech-icon>
    <tech-icon name="typescript" size="sm"></tech-icon>
  `,
})
export class ExampleComponent {}

Bundle impact

| What you import | Bundle size (gzipped) | | --- | --- | | 5 icons | ~58 KB | | 50 icons | ~80 KB | | All 430+ icons (provideAllIcons()) | ~383 KB |

Only the icons you register via provideIcons() are included in your production bundle. The rest are removed by tree-shaking.

Import all icons (not recommended for production)

If you don't care about bundle size:

import { provideAllIcons } from '@rchernando/tech-icons';

export const appConfig: ApplicationConfig = {
  providers: [provideAllIcons()]
};

NgModule-based apps

import { NgModule } from '@angular/core';
import { TechIconsModule, provideAllIcons } from '@rchernando/tech-icons';

@NgModule({
  imports: [TechIconsModule],
  providers: [provideAllIcons()], // or provideIcons(angularIcon, ...)
})
export class AppModule {}

Compatibility

| Angular | Supported | | ------- | --------- | | 19.x | Yes | | 18.x | Yes | | 17.x | Yes | | 16.x | Yes |

API Reference

provideIcons(...icons: TechIcon[])

Registers specific icons for tree-shaking. Call in your app's providers array.

provideAllIcons()

Registers all 430+ icons. Adds ~1 MB to your bundle before compression.

<tech-icon> component

| Input | Type | Default | Description | | --- | --- | --- | --- | | name | string (use IconType for type safety) | required | Icon key (e.g. 'angular', 'react') | | type | 'default' \| 'light' \| 'dark' | 'default' | Theme variant. Falls back to available variant. | | size | 'sm' \| 'md' \| 'lg' \| 'custom' | 'lg' | Predefined size or 'custom' for manual dimensions. | | customWidth | string | 'auto' | CSS width when size="custom" (e.g. '48px'). | | customHeight | string | 'auto' | CSS height when size="custom" (e.g. '48px'). |

Predefined sizes

| Size | Dimensions | | ---- | ---------- | | sm | 16 x 16 px | | md | 24 x 24 px | | lg | 32 x 32 px |

TechIconsService

Injectable service for programmatic access to the icon registry.

import { TechIconsService } from '@rchernando/tech-icons';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private icons: TechIconsService) {
    const icon = this.icons.getIcon('angular');
    const all = this.icons.getAllIcons();
    const exists = this.icons.hasIcon('react');
  }
}

| Method | Returns | Description | | --- | --- | --- | | getIcon(name: string) | TechIcon \| undefined | Look up a single icon by key. | | getAllIcons() | TechIcon[] | Get all registered icons. | | hasIcon(name: string) | boolean | Check if an icon key exists. | | registerIcons(...icons) | void | Manually register icons at runtime. |

IconType

Union type of all available icon keys. Provides IDE autocompletion and compile-time safety.

import { IconType } from '@rchernando/tech-icons';

const icon: IconType = 'angular'; // OK
const bad: IconType = 'nonexistent'; // compile error

TechIcon interface

interface TechIcon {
  id: number;
  title: string;
  key: string;
  default?: string; // SVG markup (single-variant icons)
  light?: string;   // SVG markup (light theme)
  dark?: string;    // SVG markup (dark theme)
}

Usage examples

Theme variants

<tech-icon name="github" type="light"></tech-icon>
<tech-icon name="github" type="dark"></tech-icon>
<tech-icon name="github"></tech-icon> <!-- auto-selects default, then light -->

Custom sizing

<tech-icon name="angular" size="custom" customWidth="64px" customHeight="64px"></tech-icon>

Dynamic icons

@Component({
  standalone: true,
  imports: [TechIconsComponent],
  template: `<tech-icon [name]="selectedIcon" [size]="iconSize"></tech-icon>`,
})
export class DynamicExample {
  selectedIcon = 'angular';
  iconSize: 'sm' | 'md' | 'lg' = 'md';
}

Icon naming convention

Import names follow the pattern {camelCaseKey}Icon:

| Icon key | Import name | | --- | --- | | angular | angularIcon | | visual-studio-code | visualStudioCodeIcon | | tailwind-css | tailwindCssIcon | | next.js | nextJsIcon | | discord.js | discordJsIcon | | c | cIcon | | c++ | cCIcon | | c# | cCSharpIcon |

Use your IDE's autocomplete on import { ... } from '@rchernando/tech-icons' to discover all available icons.

Available icons

The library includes 430+ icons covering:

• Frameworks & libraries -- Angular, React, Vue, Svelte, Astro, Next.js, Nuxt, etc.
• Languages -- TypeScript, JavaScript, Python, Rust, Go, Lua, etc.
• Cloud & DevOps -- AWS, Google Cloud, Azure, Docker, Kubernetes, etc.
• Databases -- PostgreSQL, MongoDB, Redis, Supabase, etc.
• Design tools -- Figma, Blender, Adobe suite, etc.
• AI & ML -- OpenAI, Claude AI, Groq, Cohere, Ollama, etc.
• Platforms & services -- GitHub, GitLab, Vercel, Netlify, Cloudflare, etc.

Use TechIconsService.getAllIcons() to get the full list programmatically.

Security

This package has zero known vulnerabilities:

• Runtime dependency: tslib ^2.3.0 only (no transitive dependencies)
• Peer dependencies: @angular/core >=16.0.0, @angular/common >=16.0.0
• sideEffects: false for safe tree-shaking
• Development dependencies (webpack, karma, etc.) are NOT included in the published package

License

MIT