[BUG] Docs / Community Card Icons in landing page Header section cards use icons that don't match their sections

[aniketsingh1023]

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:

   // 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:

   {
     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:

   <rect width='42' height='37' fill='currentColor' opacity='0.1' className='dark:opacity-20' />

   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?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[princerajpoot20]

@aniketsingh1023 go ahead and raise the PR

[aniketsingh1023]

@princerajpoot20 Sure, Started working on it