Comfy-Org / Comfy-Org/ComfyUI_frontend

ai-models icons in apps/website are not duplicates of the package's — decide which rendition is canonical

Open
#14,792 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

Carried over from the design-system token work as "five icons the package already ships are duplicated in `apps/website`, but consuming them means adopting the Tailwind icon plugin `base.css` excludes."

The premise is wrong, and the correction changes what the follow-up should be.

`apps/website/public/icons/ai-models/{grok,bytedance,openai,wan,gemini}.svg` and `packages/design-system/src/icons/{grok,bytedance,openai,wan,gemini}.svg` share names but are **different artwork**:

| icon | website | package |
| --- | --- | --- |
| grok | 952 B, 32×32 | 1171 B, 512×512 |
| bytedance | 1406 B, 32×32 | 1416 B, 512×512 |
| openai | 3030 B, 32×32 | 3037 B, 512×512 |
| wan | 1213 B, 32×32 | 2443 B, 512×512 |
| gemini | 1206 B, 32×32 | 6507 B, 512×512 |

`gemini` is the clearest case: the website ships the four-colour Google "G", the package ships a different mark entirely. These are two renditions of the same provider brands, drawn at different sizes for different jobs — the website uses them as `badgeIcon: '/icons/ai-models/gemini.svg'` URLs on model cards (`AIModelsSection.vue`), the app renders `icon-[comfy--*]` mask utilities.

So there is nothing to deduplicate mechanically, and the Tailwind icon plugin is not the blocker. What is actually open:

1. Which rendition is canonical per provider? That is a design call, not a refactor.
2. Should provider logos live in the design system at all? They are third-party marks, not Comfy brand assets — the argument for centralising them is consistency, not drift.

Worth answering before anyone spends time on the plugin adoption the original note assumed was needed.

Contributor guide

Open the contributing guide

Research direction

Compare the five SVGs under apps/website/public/icons/ai-models and packages/design-system/src/icons, then inspect AIModelsSection.vue and the app’s icon-[comfy--*] mask usage. Decide the canonical rendition for each provider and whether third-party logos belong in the design system. Done means the design decision is recorded before plugin-adoption work proceeds.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.