Skip to main content

​
Icon & Visual Standards

Consistent visual language for release notes to improve scannability and recognition.
Icon Library: Font Awesome 6 ONLY. The BeatPass docs are configured with "icons": { "library": "fontawesome" } in docs.json. Never use Lucide, Heroicons, or any other library’s icon names. Verify every icon at fontawesome.com/icons before use.

​
By Tag (Primary Icons)

TagIconColorUsage
featurestar#f59e0b (amber)New functionality
improvementbolt#3b82f6 (blue)Enhancements
bugfixwrench#6b7280 (gray)Fixes
securityshield#dc2626 (red)Security items
performancegauge#22c55e (green)Speed improvements
deprecationtriangle-exclamation#f97316 (orange)Removals
infrastructureserver#8b5cf6 (purple)Backend changes
designpalette#ec4899 (pink)UI/UX changes

​
By Component

ComponentIconNotes
billingcredit-cardPayments, subscriptions
producer-dashboardchart-barAnalytics, dashboard
track-uploadcloud-arrow-upUpload flow
playercircle-playAudio/video player
messagingcommentChat, comments
artist-profileuserProfiles, bios
beat-requestsmusicRequest system
licensingfile-linesLicenses, contracts
searchsearchSearch features
playlistslistPlaylist management
socialusersFollowing, sharing
authenticationlockLogin, security
apicodeTechnical/API
notificationsbellAlerts, emails
admingearAdmin tools
stripe-connectwalletPayouts, banking

​
Severity Indicators

SeverityBadge ColorIcon
majorgreenrocket
minorbluestar
patchgraywrench
hotfixredcircle-exclamation

​
Usage Patterns

​
In Cards

<Card title="Feature Name" icon="star" color="#f59e0b">
  Description of the feature
</Card>

​
In Accordions

<Accordion title="Feature Category" icon="bolt">
  Content here
</Accordion>

​
In Updates

<Update label="Date" tags={["feature"]} icon="star">
  Update content
</Update>

​
Color Accessibility

All color combinations meet WCAG AA standards:
  • Dark text on light backgrounds
  • Icons use high-contrast colors
  • Avoid color-only indicators (always pair with icon or text)

​
Examples

​
Major Release Card

<Card title="Production Launch" icon="rocket" color="#22c55e">
  <Badge color="green">v3.0.0</Badge>
  Major platform release
</Card>

​
Security Update

<Card title="Security Patch" icon="shield" color="#dc2626">
  <Badge color="red">HOTFIX</Badge>
  Critical vulnerability fixed
</Card>

​
Feature List

<AccordionGroup>
  <Accordion title="Beat Requests" icon="music">
    New request system for producers
  </Accordion>
  <Accordion title="Dashboard" icon="chart-bar">
    Producer analytics overhaul
  </Accordion>
</AccordionGroup>

​
Prohibited Icons

Don’t use:
  • Emoji (🎉, 🔥, etc.) — inconsistent rendering
  • Custom SVGs — maintenance burden
  • Text-only indicators — accessibility issues
  • Animated icons — distracting
  • Lucide icon names — wrong library, will silently fail to render
  • Deprecated Font Awesome 4/5 names — may not exist in FA6
Stick to Font Awesome 6 icon names only. Verify at fontawesome.com/icons.

​
Common Lucide → FA6 Mistakes

These Lucide names are frequently used by mistake. Always use the FA6 equivalent:
❌ Wrong (Lucide)✅ Correct (FA6)Context
zapboltImprovements
alert-triangletriangle-exclamationDeprecations
alert-circlecircle-exclamationHotfixes
cloud-uploadcloud-arrow-upUpload flow
message-squarecommentMessaging
file-textfile-linesLicensing
play-circlecircle-playPlayer
settingsgearAdmin
bar-chartchart-barAnalytics
scalescale-balancedLegal
editpen-to-squareEditing
trash-2trash-canDeletion
monitordesktopSessions
disccompact-discTracks/albums
Last modified on February 6, 2026