Charcoal UI

Glyph: Icon library template

Four thousand icons, one style.

For icon sets, fonts and design assets: a search-first hero, a big hover list of collections, a lifetime licence deal, a social wall and simple FAQs.

About the Glyph template

Glyph sells design assets. A search-first hero lets visitors look for an icon, collections appear as a large hover list, a lifetime licence card with a seat counter does the selling, and a designer social wall and licence FAQs answer the rest.

Four thousand icons, one style. It is a complete icon library landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.

Who Glyph is for

  • Icon sets and illustration packs.
  • Font foundries.
  • UI kits and templates.
  • Stock asset libraries.

What is inside

7 sections, top to bottom:

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
  • Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
  • Pricing Lifetime: Lifetime deal card with a strike-through price, seats-claimed bar, end timer and refund promise.
  • Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Minimal: One quiet row: brand, a few links and the year.

How it is built

The licence card's price, seats and features are props. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.

Install Glyph

npx shadcn@latest add @charcoal/glyph

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Glyph for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Glyph a Next.js template?
It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
  • Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
  • Pricing Lifetime: Lifetime deal card with a strike-through price, seats-claimed bar, end timer and refund promise.
  • Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Minimal: One quiet row: brand, a few links and the year.

Glyph as Markdown