Edit Ambiguous Icon

Name

Also known as (comma separated)

Brief definition Icon whose meaning is unclear.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "action", "type": "text", "label": "Action", "default": "Archive" }, { "id": "fixed", "type": "toggle", "label": "Fixed (labelled)", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "size", "type": "number", "label": "Icon size (px)", "default": 40, "min": 32, "max": 56, "step": 4 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ai-demo\">\n <span class=\"ai-demo__badge{{#if fixed}} ai-demo__badge--good{{/if}}\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: ambiguous icon{{/unless}}</span>\n <div class=\"ai-demo__row\">\n <button type=\"button\" class=\"ai-demo__btn\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}};\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FAF7F2\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /></svg>\n </button>\n {{#if fixed}}<span class=\"ai-demo__label\">{{action}}</span>{{/if}}\n </div>\n <p class=\"ai-demo__caption\">{{#if fixed}}icon paired with a visible text label &mdash; no guessing{{/if}}{{unless fixed}}a plain circle could mean anything: read, mute, select, status&hellip;{{/unless}}</p>\n</div>\n<style>\n.ai-demo { width: 280px; font: 14px system-ui, sans-serif; color: #241430; }\n.ai-demo__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 10px; background: #b3261e; color: #FAF7F2; }\n.ai-demo__badge--good { background: #1a7a44; color: #FAF7F2; }\n.ai-demo__row { display: flex; align-items: center; gap: 10px; }\n.ai-demo__btn { border: none; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }\n.ai-demo__label { font-weight: 600; }\n.ai-demo__caption { margin-top: 10px; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div style=\"width:280px;font-family:system-ui,sans-serif;color:#241430\">\n <span class=\"ai-tw-badge{{#if fixed}} ai-tw-badge--good{{/if}} inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: ambiguous icon{{/unless}}</span>\n <div class=\"flex items-center gap-2.5\">\n <button type=\"button\" class=\"border-0 rounded-lg grid place-items-center cursor-pointer\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}}\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FAF7F2\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /></svg>\n </button>\n {{#if fixed}}<span class=\"font-semibold\">{{action}}</span>{{/if}}\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430aa]\">{{#if fixed}}icon paired with a visible text label &mdash; no guessing{{/if}}{{unless fixed}}a plain circle could mean anything: read, mute, select, status&hellip;{{/unless}}</p>\n</div>\n<style>\n.ai-tw-badge { background: #b3261e; color: #FAF7F2; }\n.ai-tw-badge--good { background: #1a7a44; color: #FAF7F2; }\n</style>", "react": "export function AmbiguousIcon({\n action = \"{{action}}\",\n fixed = {{fixed}},\n accent = \"{{accent}}\",\n size = {{size}},\n}) {\n return (\n <div style={{ width: 280, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <span style={{ display: \"inline-block\", padding: \"3px 10px\", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? \"#1a7a44\" : \"#b3261e\", color: \"#FAF7F2\" }}>\n {fixed ? \"\\u2713 Better\" : \"\\u2717 Anti-pattern: ambiguous icon\"}\n </span>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <button type=\"button\" style={{ width: size, height: size, border: \"none\", borderRadius: 8, display: \"grid\", placeItems: \"center\", cursor: \"pointer\", background: accent }}>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FAF7F2\" strokeWidth=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /></svg>\n </button>\n {fixed && <span style={{ fontWeight: 600 }}>{action}</span>}\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430aa\" }}>{fixed ? \"icon paired with a visible text label \\u2014 no guessing\" : \"a plain circle could mean anything: read, mute, select, status\\u2026\"}</p>\n </div>\n );\n}" }