glyphflow — icons that move

Lucide icons animated on the native Web Animations API. Zero animation dependencies, real tree-shaking, and morphing between shapes. For Angular.

CopyGet started
icons
with variants
with hold
one icon, gzip
animations

Morph between shapes

Smooth transitions between outlines. Keyframes are computed once and the browser interpolates them — zero animation loop.

Try it in the editor

See the API

import { Component } from '@angular/core';
import { GfIconComponent, bellIcon } from 'glyphflow';

@Component({
  selector: 'app-alert',
  imports: [GfIconComponent],
  template: '<gf-icon [iconDef]="bell" [size]="24" label="Notifications" />',
})
export class Alert {
  protected readonly bell = bellIcon;
}

Angular >=20.0.0 <23.0.0 · renders on the server (SSR), with no real window or document.

  • Light by design

    Real tree-shaking. You only ship what you actually use.

  • Modern API

    Standalone, signals, and strict typing. No NgModules.

  • Built to move

    Declarative animations on WAAPI, no heavy dependencies.

How the catalog works

The number on each card is how many animation variants the icon has. The hold mark means one of them stays put while the pointer is on it.

5a-arrow-downa-arrow-down
5a-arrow-upa-arrow-up
4a-large-smalla-large-small
6 hold accessibilityaccessibility
4activityactivity
5 hold adad
5 hold air-ventair-vent
4airplayairplay
5alarm-clockalarm-clock
6alarm-clock-checkalarm-clock-check
5alarm-clock-minusalarm-clock-minus
6alarm-clock-offalarm-clock-off
5alarm-clock-plusalarm-clock-plus
4alarm-smokealarm-smoke
5 hold albumalbum
5align-center-horizontalalign-center-horizontal
5align-center-verticalalign-center-vertical
5align-end-horizontalalign-end-horizontal
5align-end-verticalalign-end-vertical
5align-horizontal-distribute-centeralign-horizontal-distribute-center
5align-horizontal-distribute-endalign-horizontal-distribute-end
5align-horizontal-distribute-startalign-horizontal-distribute-start
5align-horizontal-justify-centeralign-horizontal-justify-center
5align-horizontal-justify-endalign-horizontal-justify-end
5align-horizontal-justify-startalign-horizontal-justify-start
5align-horizontal-space-aroundalign-horizontal-space-around
5align-horizontal-space-betweenalign-horizontal-space-between
5align-start-horizontalalign-start-horizontal
5align-start-verticalalign-start-vertical
5align-vertical-distribute-centeralign-vertical-distribute-center
5align-vertical-distribute-endalign-vertical-distribute-end
5align-vertical-distribute-startalign-vertical-distribute-start
5align-vertical-justify-centeralign-vertical-justify-center
5align-vertical-justify-endalign-vertical-justify-end
5align-vertical-justify-startalign-vertical-justify-start
5align-vertical-space-aroundalign-vertical-space-around
5align-vertical-space-betweenalign-vertical-space-between
5 hold ambulanceambulance
4ampersandampersand
4ampersandsampersands
5 hold amphoraamphora
5 hold anchoranchor
5 hold angleangle
5 hold antennaantenna
4anvilanvil
5 hold apertureaperture
4app-windowapp-window
4app-window-macapp-window-mac
5 hold appleapple
4archivearchive
4archive-restorearchive-restore
4archive-xarchive-x
5 hold armchairarmchair
6 hold arrow-big-downarrow-big-down
6 hold arrow-big-down-dasharrow-big-down-dash
6 hold arrow-big-leftarrow-big-left
6 hold arrow-big-left-dasharrow-big-left-dash
6 hold arrow-big-rightarrow-big-right
6 hold arrow-big-right-dasharrow-big-right-dash
6 hold arrow-big-uparrow-big-up
6 hold arrow-big-up-dasharrow-big-up-dash
6arrow-downarrow-down
7 hold arrow-down-0-1arrow-down-0-1
7 hold arrow-down-1-0arrow-down-1-0
7 hold arrow-down-a-zarrow-down-a-z
6 hold arrow-down-from-linearrow-down-from-line
6arrow-down-leftarrow-down-left
8 hold arrow-down-narrow-widearrow-down-narrow-wide
6arrow-down-rightarrow-down-right
7 hold arrow-down-to-dotarrow-down-to-dot
6 hold arrow-down-to-linearrow-down-to-line
6arrow-down-uparrow-down-up
8 hold arrow-down-wide-narrowarrow-down-wide-narrow
7 hold arrow-down-z-aarrow-down-z-a
6arrow-leftarrow-left
6 hold arrow-left-from-linearrow-left-from-line
6arrow-left-rightarrow-left-right
6 hold arrow-left-to-linearrow-left-to-line
6arrow-rightarrow-right
6 hold arrow-right-from-linearrow-right-from-line
7arrow-right-leftarrow-right-left
6 hold arrow-right-to-linearrow-right-to-line
6arrow-uparrow-up
7 hold arrow-up-0-1arrow-up-0-1
7 hold arrow-up-1-0arrow-up-1-0
7 hold arrow-up-a-zarrow-up-a-z
6arrow-up-downarrow-up-down
7 hold arrow-up-from-dotarrow-up-from-dot
6 hold arrow-up-from-linearrow-up-from-line
6arrow-up-leftarrow-up-left
8 hold arrow-up-narrow-widearrow-up-narrow-wide
6arrow-up-rightarrow-up-right
6 hold arrow-up-to-linearrow-up-to-line
8 hold arrow-up-wide-narrowarrow-up-wide-narrow
7 hold arrow-up-z-aarrow-up-z-a
5arrows-up-from-linearrows-up-from-line
4asteriskasterisk
5 hold astroidastroid
4at-signat-sign
6 hold atomatom
5audio-linesaudio-lines
4audio-lines-xaudio-lines-x
4audio-waveformaudio-waveform
4awardaward
4axeaxe
4axis-3daxis-3d
5 hold babybaby
5 hold backpackbackpack
5badgebadge
6badge-alertbadge-alert
5badge-centbadge-cent
5badge-checkbadge-check
5badge-dollar-signbadge-dollar-sign
5badge-eurobadge-euro
5badge-indian-rupeebadge-indian-rupee
5badge-infobadge-info
5badge-japanese-yenbadge-japanese-yen
5badge-minusbadge-minus
5badge-percentbadge-percent
5badge-plusbadge-plus

Showing 1–200 of 1767