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:

  • 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

Quick navigation

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

  1. TechCards Icons - Colorful technology logos and framework icons
  2. DetailIconCards Icons - Monochrome feature and service icons
  3. DocsList Icons - Simple navigation and action icons

Component compatibility

ComponentIcon SystemUse Case
TechCardsTechCards IconsTechnology/framework showcases
DetailIconCardsDetailIconCards IconsFeature/service showcases
DocsListBuilt-in themesDocumentation links

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

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

  • TechCards: Use kebab-case (e.g., 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

  1. Test your icons: Always verify that your chosen icon works in the target component
  2. Check both systems: If an icon doesn't work in one system, try the other
  3. Use descriptive names: Choose icon names that clearly represent the technology or feature
  4. Document your choices: Keep track of which icons work in which components
  5. Fallback gracefully: Provide alternative text or descriptions when icons aren't available

Component selection guide

Use CaseComponentIcon SystemExample
Technology showcaseTechCardsTechCards IconsNode.js, React, Python
Feature showcaseDetailIconCardsDetailIconCards IconsOpenAI, AWS, Database
Documentation linksDocsListBuilt-in themesGuides, API docs
Simple navigationDocsListBuilt-in themesRelated topics

Troubleshooting

Common issues

  1. Icon not displaying: Check that the icon name exists in the correct system
  2. Wrong icon system: Verify you're using the right component for your icon
  3. Missing files: Ensure SVG files exist in the correct directories
  4. Case sensitivity: Icon names are case-sensitive

Testing icons

To test if an icon works:

  1. TechCards: Check if {icon}.svg exists in /public/images/technology-logos/
  2. DetailIconCards: Check if the icon is mapped in the component code
  3. DocsList: Use the built-in themes (default, docs, repo)

Getting help

  • Review the Component Architecture for technical details
  • Test icons in a development environment before using in production

Complete icon showcase

TechCards Icons (Technology Logos)

Programming Languages & Frameworks

Cloud & Infrastructure

Databases & Data

Services & APIs

DetailIconCards Icons (Feature Icons)

AI & Machine Learning

Development Tools

Business & Analytics

UI & Design

Infrastructure & Services

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 Showcase.

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