[BUG] Docs / Community Card Icons in landing page Header section cards use icons that don't match their sections
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
### Describe the bug.
Several section cards on the `/docs` landing page are wired to icon components that don't match the section they represent. Because the icons are shared across the site, the mismatch is visible in the code as well as in the UI.
Looking at `components/data/buckets.ts`:
1. **Tools** uses `IconUseCases` — the icon component that belongs to the "Use Cases" concept. It renders as a pen/quill, which reads as "writing/authoring", not "tools ecosystem". A wrench, gear, or toolbox would communicate the section correctly.
2. **Specification Explorer** uses `IconExplorer`, which renders as a sitemap/flow-chart node with a plus sign. For a page described as "Simplifying our Specification JSON Schema like a pro", a magnifier/explore or schema-tree metaphor would be clearer. As drawn, it reads as "add a node".
3. Separately, `components/icons/Migration.tsx` exports its component as `IconUsers`:
```tsx
// components/icons/Migration.tsx
export default function IconUsers({ ...rest }) {
```
The file is imported as `IconMigration` in `buckets.ts`, so it works, but the declared name is wrong and misleading for anyone searching the codebase for the users icon.
The card grid on the community landing page uses icons that either belong to an unrelated concept or break the visual style of the rest of the set. All mappings are in `components/navigation/communityItems.tsx`.
4. **Board Members uses the Modelina product logo.** Line 56 maps the card to `IconModelina`:
```tsx
{
icon: IconModelina,
title: 'Board Members',
href: '/community/board',
```
Modelina is a separate AsyncAPI tool, and `components/icons/Modelina.tsx` is its four-square logo mark. Using a product logo for a governance page is misleading — a reader who knows Modelina will assume the card links to it. A people/board metaphor would be correct.
5. **Technical Steering Committee icon reads as a vehicle.** `components/icons/TSC.tsx` draws a rounded body on a horizontal baseline with a windshield-like angled path, which renders as a van/car at card size. It carries no meaning related to a steering committee.
6. **Events & Updates icon is stylistically inconsistent with every sibling icon.** `components/icons/Newsroom.tsx` begins with a filled background rectangle:
```tsx
```
Every other icon in this grid is a stroke-only line icon with no fill. The result is a visibly heavier, boxed-in icon that doesn't sit in the same visual family, and it's drawn on a `42x37` viewBox while its siblings use square viewBoxes, so its optical size differs too.
### Expected behavior
- Each docs section card uses an icon whose metaphor matches the section's purpose.
- `Tools` uses a tools-related icon rather than the Use Cases pen icon.
- `Specification Explorer` uses an icon that communicates exploring/inspecting a schema.
- `components/icons/Migration.tsx` exports a component named `IconMigration`, matching its filename and usage.
- Board Members uses a governance/people icon rather than the Modelina product logo.
- The TSC icon uses a metaphor related to steering/committee/governance.
- The Events & Updates icon matches the stroke-only, unfilled style and square viewBox of the other icons in the grid, so the set reads as one family.
### Screenshots
### How to Reproduce
1. Run the site locally (`npm run dev`) or visit https://www.asyncapi.com/docs
2. Look at the section card grid on the docs landing page
3. Compare the **Tools** and **Specification Explorer** icons against their card titles
4. Open `components/data/buckets.ts` and note `Tools` is mapped to `IconUseCases`
5. Open `components/icons/Migration.tsx` and note the exported function is named `IconUsers`
### 🖥️ Device Information [optional]
- Operating System (OS): macOS
- Browser: Chrome
- Browser Version: latest
### 👀 Have you checked for similar open issues?
- [x] I checked and didn't find similar issue
### 🏢 Have you read the Contributing Guidelines?
- [x] I have read the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md)
### Are you willing to work on this issue ?
Yes I am willing to submit a PR!
Contributor guide
Research direction
Start with components/data/buckets.ts and components/navigation/communityItems.tsx to verify the affected card mappings, then inspect Migration.tsx, Modelina.tsx, TSC.tsx, and Newsroom.tsx. Run npm run dev and compare the docs and community card grids with the issue screenshots. Done means the icons match their section concepts, Migration exports the expected name, and the Events & Updates icon shares the siblings’ stroke-only square style.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100