Add one to BlockFrame covers, HyperFrames compositions, and slidesreal official brand mark(OpenAI flower mark, Codex terminal mark, Zhipu elephant, Anthropic, Gemini, DeepSeek……), rather than hand-drawing or AI-generating one that looks similar but is wrong. The source is LobeHub Icons（@lobehub/icons)—an open-source icon library dedicated to collecting AI / LLM brand logos, static SVG/PNG, no dependencies.
Why not just WebFetch the official site
https://lobehub.com/icons/<brand> the page people viewis blocked behind Vercel bot verification(both WebFetch / curl will get Vercel Security Checkpoint, HTTP 403). Sodon't scrape that page, go directly through itsstatic SVG npm package + jsDelivr CDN(public, no verification): package name @lobehub/icons-static-svg, icons at /icons/<slug>.svg。
Dependencies
command -v curl python3 # 都要；脚本纯标准库
Workflow
Step 1 · Find icon slugs by keyword
Don't guess slugs out of thin air (GLM's is not glm but chatglm / glmv; Zhipu is zhipu). Search first:
scripts/find-icon.sh <keyword> # 如 glm / openai / anthropic / gemini / deepseek / qwen
Each brand generally has 3 variants:
| File | What it is | Where to use it |
|---|---|---|
<slug>.svg |
Monochrome (black) mark | Light backgrounds / places that need a stroke |
<slug>-color.svg |
Brand-color mark | When you want the authentic brand color |
<slug>-text.svg |
Text logo (includes the name) | Use as a wordmark |
(Not every brand has all three; whichever is missing, fetch will skip it automatically.)
Step 2 · Download into the project
scripts/fetch-icon.sh <slug> [outdir] # outdir 默认 ./assets/brand
# 例：scripts/fetch-icon.sh chatglm assets/brand
# scripts/fetch-icon.sh openai
Put the SVG you got into the project (assets/brand/, then cp a copy to build/brand/ for compositions,cp to the same level as the cover HTML for the cover to reference).
Step 3 · Use it in BlockFrame
- The monochrome mark is black → place it inwhite/cream small block(on a black background it will be a black blob and invisible). Common approach: embed a small white rounded square holding
<img>：<span class="badge"><img src="brand/openai.svg" alt="OpenAI"><span class="bt">OPENAI · 标题</span></span>.badge img{width:58px;height:58px;background:#fff;border-radius:8px;padding:6px;} - Want brand color? Use
-color.svg; want to directly show the brand name? Use-text.svg。 - In the HyperFrames composition, add to the SVG's
<img>adddata-layout-ignore(the icon itself doesn't need inspecting to measure layout). - After rendering, be sure to
Readtake a look: confirm the logo actually rendered, isn't tofu/blank, and doesn't clash with a dark background.
Gotchas
- Don't WebFetch
lobehub.com/icons/*— Vercel bot verification, 403. Go through the jsDelivr CDN (the script already does this). - Slugs must be searched, not guessed. GLM=
chatglm/glmv, Zhipu=zhipu, the Claude family is also split intoanthropic/claude. Firstfind-icon.sh。 - Place monochrome marks on light backgrounds/white blocks, don't put them directly on dark blocks (black mark on black background is invisible).
- Copyright/trademark: these are the registered trademarks of their respective owners, for use inintroductions / reviews / newsReferencing content of this kind is within the scope of fair use; don't use it for anything that would make people mistake it for "official output / endorsement".
- Offline / network-blocked: the script needs to connect to the internet to pull from the CDN. It's recommended tosave the retrieved SVG into the project
assets/brand/, so that re-rendering doesn't require going online again.
Out of scope
- Drawing original logos / illustrations: this skill only fetchesexisting brands'official marks. For original visuals, use
cover-imagegenerative skills like that. - Non-AI brands: LobeHub mainly collects AI/LLM/tech companies; obscure brands may not be there—
find-icon.shif you can't find it, don't force it. - Video output / cover layout: that's the job of
blockframe-video/producing-video, this skill is only responsible for "getting the icon in hand".