Adom UI Design System
Public Made by Adomby adom
How the AI builds and tests interfaces people love to use in Adom. Ships as one installable skill that bundles focused skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths).
d070f06
1mo ago
Adom shared icons
Drop-in SVGs so the same affordance looks the same in every Adom app. Each is
viewBox="0 0 24 24", sized 1em, and painted with fill="currentColor", so it inherits
the surrounding text colour and font-size. Size it with CSS (width: 20px) or a wrapper's
font-size; do NOT hardcode a colour into the file.
| File | Icon | Use for |
|---|---|---|
settings-cog-outline.svg |
mdi:cog-outline | THE settings entry point: the cog at the right end of an app header. Every app, every surface. |
settings-cog.svg |
mdi:cog (filled) | DEPRECATED (John's ruling 2026-08-24: Adom icons are line drawings, never filled glyphs). Kept only so old references do not 404; swap it out when you touch a header that still uses it. |
Source: Material Design Icons (mdi:cog-outline, mdi:cog), Apache 2.0. If your app already
renders Iconify, <Icon icon="mdi:cog-outline" /> is the identical glyph and is preferred
over copying the file; these exist for apps with no icon runtime.
Using it
<button class="icon-btn" aria-label="Settings" title="Settings">
<img src="/assets/icons/settings-cog.svg" alt="" width="20" height="20">
</button>
Inlining the SVG is better than an <img> when you want it to follow currentColor on hover:
<button class="icon-btn" aria-label="Settings" title="Settings">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="..."/></svg>
</button>
The label is always "Settings", never "Preferences" or "Options". See the settings-layout
skill for the entry point rules and everything the cog opens.
# Adom shared icons
Drop-in SVGs so the same affordance looks the same in every Adom app. Each is
`viewBox="0 0 24 24"`, sized `1em`, and painted with `fill="currentColor"`, so it inherits
the surrounding text colour and font-size. Size it with CSS (`width: 20px`) or a wrapper's
`font-size`; do NOT hardcode a colour into the file.
| File | Icon | Use for |
|---|---|---|
| `settings-cog-outline.svg` | mdi:cog-outline | THE settings entry point: the cog at the right end of an app header. Every app, every surface. |
| `settings-cog.svg` | mdi:cog (filled) | DEPRECATED (John's ruling 2026-08-24: Adom icons are line drawings, never filled glyphs). Kept only so old references do not 404; swap it out when you touch a header that still uses it. |
Source: Material Design Icons (`mdi:cog-outline`, `mdi:cog`), Apache 2.0. If your app already
renders Iconify, `<Icon icon="mdi:cog-outline" />` is the identical glyph and is preferred
over copying the file; these exist for apps with no icon runtime.
## Using it
```html
<button class="icon-btn" aria-label="Settings" title="Settings">
<img src="/assets/icons/settings-cog.svg" alt="" width="20" height="20">
</button>
```
Inlining the SVG is better than an `<img>` when you want it to follow `currentColor` on hover:
```html
<button class="icon-btn" aria-label="Settings" title="Settings">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="..."/></svg>
</button>
```
The label is always "Settings", never "Preferences" or "Options". See the `settings-layout`
skill for the entry point rules and everything the cog opens.