Hand drawn icons for Angular

In your code

Angular compiles a template and a decorator per component, so a component per icon would put 1756 of them through every consumer's build. One icon costs 1.18 kB here against 268 kB for the whole catalogue, which is the highest of the ten and the price of the component travelling with it.

import { Component } from "@angular/core";
import { SketchyIconComponent, House, Star } from "@sketchyicons/angular";

@Component({
  selector: "app-header",
  standalone: true,
  imports: [SketchyIconComponent],
  template: `
    <sketchy-icon [img]="House" [size]="20" />
    <sketchy-icon [img]="Star" [size]="15" color="#2B2521" [strokeWidth]="1.75" />
  `,
})
export class HeaderComponent {
  protected readonly House = House;
  protected readonly Star = Star;
}

size

number defaults to 24

color

string defaults to currentColor

strokeWidth

number defaults to 2

absoluteStrokeWidth

boolean defaults to false

fill

string defaults to none

Coming from lucide-angular

The geometry here is derived from Lucide, so the names match and the props match. The 247 names Lucide has renamed are exported next to the current ones, which means Home and HelpCircle keep resolving after the swap.

-import { House } from "lucide-angular";
+import { House } from "@sketchyicons/angular";

What does move is the call site: this target ships one component that takes the icon as data, so lucide-angular's <House /> becomes a component with the icon passed in. The snippet above shows the shape.

1500+ glyphs, and a page for each of them

Every glyph in the set has its own page with the code for Angular, the sizes it holds at, and the file. Here are twelve of the 1756, drawn by the same generator that built the package.

Search the whole set by name or by tag, or read the installation guide for the peer dependencies and the first icon on screen. Every glyph holds at 15 px, which is the size a real control uses.

The other targets

• React492 B
• React Native744 B
• Vue466 B
• Preact467 B
• Solid740 B
• Svelte268 B
• Plain DOM450 B

Why this one package their icons differently is worked through in One component per icon, except when that is the wrong shape.