Component icon guide
A comprehensive guide to all icon systems used in Neon documentation. This guide helps you understand which icon system to use and how to implement them correctly. How to choose the right icon system ...
A comprehensive guide to all icon systems used in Neon documentation. This guide helps you understand which icon system to use and how to implement them correctly.
What you will learn:
Section titled “What you will learn:”- How to choose the right icon system for your use case
- Which icons are available in each system
- How to implement icons correctly in components
- Best practices for icon usage and troubleshooting
Related topics
Section titled “Related topics”Quick navigation
Section titled “Quick navigation”- Icon system overview - Understanding the different icon systems
- TechCards Icons - Technology logos and frameworks
- DetailIconCards Icons - Feature and service icons
- Icon usage guidelines - Best practices and conventions
- Icon Decision Tree - Which icon system to use when
Icon system overview
Section titled “Icon system overview”Neon documentation uses multiple icon systems for different components. Understanding which system to use is crucial for proper implementation.
Available icon systems
Section titled “Available icon systems”- TechCards Icons - Colorful technology logos and framework icons
- DetailIconCards Icons - Monochrome feature and service icons
- DocsList Icons - Simple navigation and action icons
Component compatibility
Section titled “Component compatibility”| Component | Icon System | Use Case |
|---|---|---|
| TechCards | TechCards Icons | Technology/framework showcases |
| DetailIconCards | DetailIconCards Icons | Feature/service showcases |
| DocsList | Built-in themes | Documentation links |
Usage example
Section titled “Usage example”<DetailIconCards>
<a
href="/docs/ai/openai"
title="OpenAI integration"
description="Build AI features with OpenAI"
icon="openai"
>
OpenAI Integration
</a>
<a
href="/docs/ai/langchain"
title="LangChain integration"
description="Create AI workflows with LangChain"
icon="langchain"
>
LangChain Integration
</a>
</DetailIconCards>For technical implementation details, see the Icon Systems section in the Component Architecture guide.
Icon usage guidelines
Section titled “Icon usage guidelines”Choosing the right icon system
Section titled “Choosing the right icon system”- TechCards: Use for technology and framework showcases
- DetailIconCards: Use for feature and service showcases
- DocsList: Use built-in themes for documentation links
Icon naming conventions
Section titled “Icon naming conventions”- TechCards: Use kebab-case (for example,
node-js,next-js) - DetailIconCards: Use camelCase or kebab-case as defined in the mapping
- File Requirements: Ensure SVG files exist in the correct directories
Best practices
Section titled “Best practices”- Test your icons: Always verify that your chosen icon works in the target component
- Check both systems: If an icon doesn't work in one system, try the other
- Use descriptive names: Choose icon names that clearly represent the technology or feature
- Document your choices: Keep track of which icons work in which components
- Fallback gracefully: Provide alternative text or descriptions when icons aren't available
Component selection guide
Section titled “Component selection guide”| Use Case | Component | Icon System | Example |
|---|---|---|---|
| Technology showcase | TechCards | TechCards Icons | Node.js, React, Python |
| Feature showcase | DetailIconCards | DetailIconCards Icons | OpenAI, AWS, Database |
| Documentation links | DocsList | Built-in themes | Guides, API docs |
| Simple navigation | DocsList | Built-in themes | Related topics |
Troubleshooting
Section titled “Troubleshooting”Common issues
Section titled “Common issues”- Icon not displaying: Check that the icon name exists in the correct system
- Wrong icon system: Verify you're using the right component for your icon
- Missing files: Ensure SVG files exist in the correct directories
- Case sensitivity: Icon names are case-sensitive
Testing icons
Section titled “Testing icons”To test if an icon works:
- TechCards: Check if
{icon}.svgexists in/public/images/technology-logos/ - DetailIconCards: Check if the icon is mapped in the component code
- DocsList: Use the built-in themes (default, docs, repo)
Getting help
Section titled “Getting help”- Review the Component Architecture for technical details
- Test icons in a development environment before using in production
Complete icon showcase
Section titled “Complete icon showcase”TechCards Icons (Technology Logos)
Section titled “TechCards Icons (Technology Logos)”Programming Languages & Frameworks
Section titled “Programming Languages & Frameworks”Bun
JavaScript runtime (icon: bun)
Express
Node.js web framework (icon: express)
Hasura
GraphQL API engine (icon: hasura)
Hono
Web framework (icon: hono)
Java
Programming language (icon: java)
JavaScript
Programming language (icon: javascript)
Kotlin
Programming language (icon: kotlin)
Laravel
PHP framework (icon: laravel)
Nest.js
Node.js framework (icon: nest-js)
Next.js
React framework (icon: next-js)
Node.js
JavaScript runtime (icon: node-js)
Nuxt
Vue framework (icon: nuxt)
Phoenix
Elixir framework (icon: phoenix)
Python
Programming language (icon: python)
Quarkus
Java framework (icon: quarkus)
Rails
Ruby framework (icon: rails)
React
JavaScript library (icon: react)
Redwood SDK
Full-stack framework (icon: redwoodsdk)
Reflex
Python framework (icon: reflex)
Remix
React framework (icon: remix)
Ruby
Programming language (icon: ruby)
Rust
Programming language (icon: rust)
Solid
JavaScript library (icon: solid)
Svelte
JavaScript framework (icon: svelte)
Symfony
PHP framework (icon: symfony)
Vue
JavaScript framework (icon: vue)
Cloud & Infrastructure
Section titled “Cloud & Infrastructure”AWS S3 Bucket
Cloud storage service (icon: aws-s3-bucket)
Backblaze
Cloud storage and backup (icon: backblaze)
Heroku
Cloud platform (icon: heroku)
Koyeb
Cloud platform (icon: koyeb)
Netlify
Web hosting platform (icon: netlify)
Railway
Deployment platform (icon: railway)
Render
Cloud platform (icon: render)
Vercel
Deployment platform (icon: vercel)
Databases & Data
Section titled “Databases & Data”Convex
Backend platform (icon: convex)
Entity
Data modeling tool (icon: entity)
Estuary
Data streaming platform (icon: estuary)
Exograph
GraphQL framework (icon: exograph)
Ferret
Data processing tool (icon: ferret)
Kafka
Stream processing platform (icon: kafka)
Knex
SQL query builder (icon: knex)
Liquibase
Database migration tool (icon: liquibase)
Materialize
Streaming database (icon: materialize)
Neon
Serverless Postgres (icon: neon)
Outerbase
Database interface (icon: outerbase)
Draxlr
Database interface (icon: draxlr)
Polyscale
Database proxy (icon: polyscale)
PostgreSQL
Database system (icon: postgresql)
Prisma
ORM for Node.js (icon: prisma)
Sequelize
ORM for Node.js (icon: sequelize)
Sequin
Data synchronization (icon: sequin)
Snowflake
Data warehouse (icon: snowflake)
SQLAlchemy
Python ORM (icon: sqlalchemy)
StepZen
GraphQL platform (icon: stepzen)
Supabase
Backend platform (icon: supabase)
Tortoise ORM
Python ORM (icon: tortoise-orm)
TypeORM
TypeScript ORM (icon: typeorm)
Drizzle
TypeScript ORM (icon: drizzle)
Services & APIs
Section titled “Services & APIs”Cloudinary
Cloud media management (icon: cloudinary)
ImageKit
Image optimization (icon: imagekit)
Inngest
Background job platform (icon: inngest)
Micronaut
Java framework (icon: micronaut)
Neo Tax
Tax calculation service (icon: neo-tax)
OAuth
Authentication protocol (icon: oauth)
Okta
Identity platform (icon: okta)
Uploadcare
File handling service (icon: uploadcare)
WunderGraph
API development platform (icon: wundergraph)
DetailIconCards Icons (Feature Icons)
Section titled “DetailIconCards Icons (Feature Icons)”AI & Machine Learning
Section titled “AI & Machine Learning”LangChain
AI framework (icon: langchain)
LlamaIndex
Data framework for LLMs (icon: llamaindex)
Ollama
Local LLM framework (icon: ollama)
OpenAI
AI platform (icon: openai)
Development Tools
Section titled “Development Tools”Atom
Code editor (icon: atom)
Binary Code
Programming and code (icon: binary-code)
Bug
Debugging and testing (icon: bug)
CLI
Command line interface (icon: cli)
CLI Cursor
Terminal cursor (icon: cli-cursor)
Code
Programming and development (icon: code)
GitHub
Code repository (icon: github)
Hook
Development hooks (icon: hook)
Ladder
Development progression (icon: ladder)
Laptop
Development machine (icon: laptop)
Setup
Configuration and setup (icon: setup)
Wrench
Tools and utilities (icon: wrench)
Business & Analytics
Section titled “Business & Analytics”A Chart
Analytics and charts (icon: a-chart)
App Store
Application marketplace (icon: app-store)
Calendar Day
Scheduling and time (icon: calendar-day)
Cards
Card-based interface (icon: cards)
Check
Verification and approval (icon: check)
Cheque
Payment processing (icon: cheque)
Chart Bar
Data visualization (icon: chart-bar)
CSV
Data format (icon: csv)
Data
Data and information (icon: data)
Metrics
Performance metrics (icon: metrics)
Performance
System performance (icon: performance)
Queries
Database queries (icon: queries)
Research
Development research (icon: research)
Stopwatch
Timing and performance (icon: stopwatch)
Table
Data tables (icon: table)
Todo
Task management (icon: todo)
Transactions
Database transactions (icon: transactions)
Trend Up
Growth and trends (icon: trend-up)
UI & Design
Section titled “UI & Design”Audio Jack
Audio connectivity (icon: audio-jack)
Cards
Card-based interface (icon: cards)
Gamepad
Gaming and interaction (icon: gamepad)
GUI
Graphical user interface (icon: gui)
Screen
Display and interface (icon: screen)
Sparkle
Visual effects (icon: sparkle)
User
User interface (icon: user)
Infrastructure & Services
Section titled “Infrastructure & Services”Autoscaling
Automatic scaling (icon: autoscaling)
AWS
Cloud computing platform (icon: aws)
Branching
Database branching (icon: branching)
Database
Database systems (icon: database)
Discord
Communication platform (icon: discord)
Download
File download (icon: download)
Enable
Feature enablement (icon: enable)
Filter
Data filtering (icon: filter)
Find Replace
Search and replace (icon: find-replace)
Gear
Settings and configuration (icon: gear)
Globe
Global connectivity (icon: globe)
Handshake
Partnerships and agreements (icon: handshake)
Heroku
Cloud platform (icon: heroku)
Hourglass
Time and waiting (icon: hourglass)
Import
Data import (icon: import)
Invert
Data transformation (icon: invert)
Lock Landscape
Security and access control (icon: lock-landscape)
Neon
Serverless Postgres (icon: neon)
Network
Network connectivity (icon: network)
Postgres
Database system (icon: postgres)
Prisma
ORM for Node.js (icon: prisma)
Privacy
Data privacy (icon: privacy)
Puzzle
Problem solving (icon: puzzle)
Refresh
Data refresh (icon: refresh)
Respond Arrow
Response and feedback (icon: respond-arrow)
Scale Up
Scaling and growth (icon: scale-up)
Search
Search functionality (icon: search)
Split Branch
Code branching (icon: split-branch)
SQL
Database queries (icon: sql)
Unlock
Access control (icon: unlock)
Vercel
Deployment platform (icon: vercel)
Wallet
Payment and billing (icon: wallet)
Warning
Alerts and warnings (icon: warning)
X
Close or cancel (icon: x)
Summary
Section titled “Summary”This guide provides an overview of Neon's icon systems and usage guidelines. For complete icon listings and detailed examples, refer to the Component Guide.
Key takeaways
Section titled “Key takeaways”- TechCards uses colorful technology logos from
/public/images/technology-logos/ - DetailIconCards uses monochrome feature icons mapped in component code
- DocsList uses built-in themes for simple navigation
- Always test icons in the target component before using
- Choose the right component based on your use case, not just the icon availability