Icons

Overview

Marketing pages use Material Symbols for buttons and UI chrome. Product-style icons (dashboard centers, navigation) live in the Epicenter Font Awesome kit — custom uploads whose slugs start with epicenter.

Slug list: src/data/fontawesome-epicenter-kit-icons.ts. Kit script: https://kit.fontawesome.com/c9e45c41d8.js.

Material Symbols

Variable icon font loaded in BrandKitLayout.astro. Use ligature names in markup, e.g. arrow_forward_ios. See the buttons page for axis demos.

Kit icons (epicenter…)

Uploaded kit icons from the Epicenter Font Awesome kit. Markup: <i class="fa-kit fa-…"></i> — replace … with the slug below. Click a tile to copy the slug (the part after fa-).

• Account fa-kit fa-epicenter-dashboard-icon--account Click to copy slug
• Charternetwork — Outlined fa-kit fa-epicenter-dashboard-icon--charternetwork--outlined Click to copy slug
• Help fa-kit fa-epicenter-dashboard-icon--help Click to copy slug
• My Office fa-kit fa-epicenter-dashboard-icon--my-office Click to copy slug
• Project Center fa-kit fa-epicenter-dashboard-icon--project-center Click to copy slug
• 50px — School Center fa-kit fa-epicenter-dashboard-icon-50px---school-center Click to copy slug
• Administration fa-kit fa-epicenter-dashboard-icon-administration Click to copy slug
• Application Center fa-kit fa-epicenter-dashboard-icon-application-center Click to copy slug
• Authorizer Icon fa-kit fa-epicenter-dashboard-icon-authorizer-icon Click to copy slug
• Board Center fa-kit fa-epicenter-dashboard-icon-board-center Click to copy slug
• Charternetwork fa-kit fa-epicenter-dashboard-icon-charternetwork Click to copy slug
• Church fa-kit fa-epicenter-dashboard-icon-church Click to copy slug
• Compliance Center fa-kit fa-epicenter-dashboard-icon-compliance-center Click to copy slug
• Dashboard fa-kit fa-epicenter-dashboard-icon-dashboard Click to copy slug
• Document Center fa-kit fa-epicenter-dashboard-icon-document-center Click to copy slug
• Document Center 2 fa-kit fa-epicenter-dashboard-icon-document-center-2 Click to copy slug
• Management Center fa-kit fa-epicenter-dashboard-icon-management-center Click to copy slug
• Performance Center fa-kit fa-epicenter-dashboard-icon-performance-center Click to copy slug
• Performance Center 2 fa-kit fa-epicenter-dashboard-icon-performance-center-2 Click to copy slug
• Reports fa-kit fa-epicenter-dashboard-icon-reports Click to copy slug
• Signout fa-kit fa-epicenter-dashboard-icon-signout Click to copy slug
• Site Visit fa-kit fa-epicenter-dashboard-icon-site-visit Click to copy slug

Usage

Decorative icons should include aria-hidden="true". Pair with visible text or an accessible name when the icon conveys meaning on its own.

<i class="fa-kit fa-epicenter-dashboard-icon-dashboard" aria-hidden="true"></i>

Short alias: fak fa-{slug}. Prefer fa-kit in new markup for clarity.