Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
Real-world examples
Live HTML demos for this skill — rendered directly in the page. 4 examples.
- 01
Integrations grid
Monochrome Simple Icons in shared 64×64 boxes — a consistent integrations wall without text logos or mixed styles.
- 02
Customer proof row
Centered partner marks on one baseline — restrained grayscale logos that read as proof, not decoration.
- 03
Tool badges
Brand color only where recognition beats restraint — same 64×64 Iconify treatment, denser composition scale.
- 04
Accessible filters
Interactive logo chips with visible labels and aria — logos as controls, not unlabeled icons.
Skill markdown
# Company Logos Skill ## Use When - A design needs recognizable brand marks without embedding custom SVG files or rendering company names as plain text. - Logo rows, integrations grids, customer proof, partner lists, and tool badges need consistent icon treatment. ## Workflow 1. Use Iconify Simple Icons as the default source for brand logos. 2. Render each logo in a 64x64 visual box, then scale the inner SVG to the composition density. 3. Keep logos monochrome by default; use brand color only when the surrounding design needs recognition more than restraint. 4. Align logos to a shared baseline or center grid so rows feel intentional. 5. Add accessible labels when logos are interactive or communicate important proof. ## Guardrails - Do not use typed company names as a replacement for logos unless no icon exists. - Do not mix filled, outline, emoji, bitmap, and wordmark styles in one row. - Do not hotlink random logo assets from search results.
More from MengTo
- Animation On ScrollUse when you need scroll-driven motion that feels intentional instead of noisy or overdone.
- Animation SystemsUse when building a coherent animation system instead of one-off motion tweaks.
- Beautiful ShadowsUse when a UI needs better depth, elevation, and shadow treatment without looking muddy.
- CobejsUse when building lightweight animated globe or orb visuals with Cobe.
- Container LinesUse when using borders and container structure as part of the visual system.
- Design First UI PromptingUse when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.