# Send Icons to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "icons", "name": "Icons", "source": "tencent", "type": "skill", "category": "内容创作", "sourceUrl": "https://clawhub.ai/ivangdavila/icons", "canonicalUrl": "https://clawhub.ai/ivangdavila/icons", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/icons", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=icons", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "icons", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-29T21:23:43.777Z", "expiresAt": "2026-05-06T21:23:43.777Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=icons", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=icons", "contentDisposition": "attachment; filename=\"icons-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "icons" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/icons" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/icons", "downloadUrl": "https://openagent3.xyz/downloads/icons", "agentUrl": "https://openagent3.xyz/skills/icons/agent", "manifestUrl": "https://openagent3.xyz/skills/icons/agent.json", "briefUrl": "https://openagent3.xyz/skills/icons/agent.md" } } ``` ## Documentation ### SVG vs Icon Fonts SVG is the modern standard: Better accessibility (native ARIA support) No flash of invisible/wrong icon (FOIT) Multicolor support Smaller bundles with tree-shaking Only consider icon fonts for legacy IE11 support. ### Accessibility Patterns Decorative icons (next to visible text): Informative icons (standalone, no label): SVG with accessible name: Warning: system error Key rules: aria-hidden="true" on SVGs that duplicate visible text focusable="false" prevents unwanted tab stops in IE/Edge must be first child inside <svg> for screen reader support IDs must be unique if multiple SVGs are inline ### Color Inheritance <svg fill="currentColor"> <path d="..."/> </svg> currentColor inherits from CSS color property. The icon changes color with hover states automatically: .button { color: blue; } .button:hover { color: red; } /* icon turns red too */ Remove hardcoded fill="#000" from SVGs before using currentColor. For stroke-based icons, use stroke="currentColor" instead. ### Sizing Standard grid sizes: 16, 20, 24, 32px Match stroke weight to size: SizeStrokeUse case16px1pxDense layouts, small text20px1.25pxDefault UI24px1.5pxButtons, primary actions32px2pxHeaders, navigation Touch targets need 44x44px minimum—icon can be smaller if tappable area is larger via padding. .icon-button { width: 24px; height: 24px; padding: 10px; /* Creates 44x44 touch target */ } ### Scaling with Text .icon { width: 1em; height: 1em; } Icon scales with surrounding text size automatically. ### Symbol Sprites For many repeated icons, reduce DOM nodes with sprites: <!-- Define once, hidden --> <svg style="display:none"> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="..."/> </symbol> <symbol id="icon-menu" viewBox="0 0 24 24"> <path d="..."/> </symbol> </svg> <!-- Use anywhere --> <svg aria-hidden="true"><use href="#icon-search"/></svg> External sprites (<use href="/icons.svg#search"/>) don't work in older Safari without polyfill. ### Performance Benchmark (1000 icons): <img> with data URI: 67ms (fastest) Inline SVG optimized: 75ms Symbol sprite: 99ms <img> external: 76ms Recommendations: Tree-shake icon libraries (Lucide, Heroicons support this) Don't import entire Font Awesome (1MB+)—use subset or switch to SVG Inline critical icons, lazy-load sprite for non-critical ### Consistency Stick to one icon set—mixing styles looks unprofessional Match icon stroke weight to your font weight (regular text = 1.5px stroke) Pick one style per context: outlined for inactive, filled for active Optical alignment differs from mathematical—circles reach edges, squares don't Name icons by appearance, not meaning: stopwatch not speed ### Common Mistakes Missing aria-hidden on decorative icons—screen readers announce gibberish Mixing rounded and sharp icon styles in same interface Giant icon libraries for 10 icons—massive bundle bloat Icon-only buttons without accessible name—impossible to use with screen readers Hardcoded colors preventing theme switching Stroke width not scaling with icon size—16px icon with 2px stroke looks heavy ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ivangdavila - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-04-29T21:23:43.777Z - Expires at: 2026-05-06T21:23:43.777Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/icons) - [Send to Agent page](https://openagent3.xyz/skills/icons/agent) - [JSON manifest](https://openagent3.xyz/skills/icons/agent.json) - [Markdown brief](https://openagent3.xyz/skills/icons/agent.md) - [Download page](https://openagent3.xyz/downloads/icons)