skill

Adom UI Design System

Public Made by Adom

by 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).

design-systembranduiuxguidelinestokens
Overview Files Skills Discover Packages Releases Dependencies Issues2 Breadcrumbs Pull Requests1 Activity
master
adom-ui-design / assets / icons
Name Last commit message Last updated
action-copy.svg 1.12.0: newbie panel is two columns with a prompts TABLE; header numbers (edge to edge, 18px mark, 15px name); copy/sen… · John Lauer 1mo ago
action-play.svg 1.12.0: newbie panel is two columns with a prompts TABLE; header numbers (edge to edge, 18px mark, 15px name); copy/sen… · John Lauer 1mo ago
action-send.svg 1.12.0: newbie panel is two columns with a prompts TABLE; header numbers (edge to edge, 18px mark, 15px name); copy/sen… · John Lauer 1mo ago
README.md icons: outline cog is THE cog, line-drawing rule generalized in section 9 (1.9.1) · John Lauer 1mo ago
settings-cog-outline.svg 1.11.0: newbie-panel skill (full-width band, icon buttons), toast look/motion spec, cog redrawn as a true line icon · John Lauer 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.