Glyph

Glyph

A self-hosted asset library that makes brand icons easy to find, customise and use.

Type
Web application
Year
Client
Glyph
My role
  • Product design
  • Development

Glyph is an open-source, white-label asset library for organisations. It gives teams a private, branded place to manage SVG icons, while making it simple for non-designers to find, recolour and download the right asset.

I designed and built Glyph to replace the awkward mix of shared folders, manual file requests and generic third-party libraries that often sits between a design system and the people expected to use it.

The problem

Icon libraries are usually maintained by designers but used across an entire organisation.

Shared drives make assets difficult to discover. Files are duplicated or become outdated. Colleagues often need help changing a colour, choosing a format or exporting an icon at the correct size. Full digital asset management platforms can solve this, but are often too expensive or complex for a focused icon library.

The challenge was to make brand assets accessible without giving up control, consistency or ownership.

The solution

Glyph provides a searchable, self-hosted portal for an organisation’s icon library.

Users can browse icons by category, search by name or tag, preview them in different foreground and background colours, and download customised SVG or PNG files. Brand palette swatches keep common choices consistent, while custom colours and export sizes support less typical use cases.

Administrators can upload SVGs in batches, manage metadata and taxonomy, control publishing, maintain user access and recover recently deleted assets.

Designing for two audiences

The product serves two distinct groups.

For general users, the interface focuses on recognition and speed: a visual grid, straightforward search, live colour controls and a clear download path.

For administrators, it adds the controls needed to maintain a reliable library: drafts, categories, tags, palettes, user roles and publishing state. These tools sit behind role-based access so they do not complicate the everyday browsing experience.

Making SVGs genuinely reusable

Uploaded SVGs often contain hardcoded colours and inconsistent presentation attributes. That makes reliable recolouring difficult.

I built a normalisation pipeline that converts colour-bearing attributes to currentColor. Administrators can choose between conservative and moderate processing, compare the original and normalised artwork visually, and adjust the setting later without losing the source file.

This turns SVG customisation into a dependable product feature rather than a best-effort browser trick.

Deployment and ownership

Glyph is designed to be adopted without a large infrastructure commitment.

A deployment runs on Cloudflare Workers, D1 and R2, with a first-run wizard for creating the initial administrator. One-click deployment provisions the required services automatically, while a single configuration file controls the product name, accent colour, attribution and initial brand palette.

Organisations can also upload their own logo through the interface, producing a fully branded portal without maintaining a separate fork of the UI.

Technical approach

I kept the architecture intentionally lean:

  • Vanilla JavaScript and Vite for the interface
  • Hono running on Cloudflare Workers for the API
  • Cloudflare D1 for users, metadata and taxonomy
  • Cloudflare R2 for original and normalised assets
  • Canvas-based PNG generation in the browser
  • Scheduled cleanup of assets after a 30-day recovery period

PNG exports happen entirely client-side, reducing server work and avoiding the need for an image-processing service. Authentication, role-based permissions and private storage keep each deployment restricted to authorised users.

Key features

  • Search by icon name, tag and category
  • Live foreground and background colour previews
  • Customised SVG and PNG downloads
  • Preset and custom PNG dimensions
  • Batch SVG upload with visual normalisation review
  • Draft and publishing workflows
  • Brand palette and taxonomy management
  • Viewer and administrator roles
  • Soft deletion with a 30-day recovery window
  • White-label configuration and logo upload
  • One-click Cloudflare deployment

Outcome

Glyph turns a static collection of files into a usable internal product.

It gives non-designers more independence, reduces repetitive asset requests and helps organisations distribute approved artwork without relying on a third-party library. For design teams, it provides enough governance to keep the collection structured and on-brand without introducing the overhead of a full DAM platform.

The project is open source on GitHub under the MIT licence and designed to run within Cloudflare’s free tier for most organisations.