skills.rest
lens-studio-devs
lens-studio-devsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

icon-selector

Searches a curated Material Icons catalog and imports icons into Lens Studio via the IconSelector MCP tool.

16|2|Updated Apr 13, 2026
Search Tags:#material icons#asset pipeline#mcp tool#lens studio#icon import#specs ui#requireasset
One-click install
npx skills add https://github.com/lens-studio-devs/ls-extensions --skill icon-selector-lens-studio-devs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-selector
Source: https://github.com/lens-studio-devs/ls-extensions/tree/main/plugins/ls-clad/skills/icon-selector
Command: npx skills add https://github.com/lens-studio-devs/ls-extensions --skill icon-selector-lens-studio-devs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Finding the right icon for Specs UI and getting it correctly imported into a Lens Studio project is error-prone: icons placed on disk manually lack .meta files and fail requireAsset() lookups. This Skill searches a curated catalog of ~200 Google Material Icons and imports the chosen icon through the IconSelector MCP tool so it works immediately in Lens Studio. ## Core Features & Use Cases - Curated Icon Search: Browse ~200 Material Icons organized by use case (navigation, media, status, device, and more) in references/material-icons-curated.md, with 2-3 suggestions when multiple icons fit. - MCP-Based Import: Import icons via the IconSelector Lens Studio MCP tool, which rasterizes the Material Symbol to PNG, generates the .meta file, and places it in Assets/Icons/ for requireAsset(). - Specs-Recommended Defaults: Applies default appearance settings (Rounded style, weight 600, 512px, white) so filenames stay predictable for requireAsset("../Icons/<name>.png") lookups. - Use Case: While building a settings panel in Lens Studio, ask for a settings gear icon; the Skill finds settings in the catalog and imports it as Assets/Icons/settings.png, ready to assign as a button's leadingIcon. ## Quick Start Ask the agent to find and import a close button icon for your Specs UI using the icon-selector skill.

Frequently Asked Questions about icon-selector

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import Material Icons into Lens Studio?▼

Use the IconSelector MCP tool with the icon name, for example IconSelector({ name: "close" }). The tool rasterizes the Material Symbol to a PNG, generates the .meta file, and places it in Assets/Icons/ so requireAsset() can load it.

How do I find the right Material Icon name for my UI?▼

Search the curated catalog in references/material-icons-curated.md, which lists about 200 icons grouped by use case such as navigation, media, and status. If several icons fit, the Skill suggests 2-3 options with brief reasoning.

Why does requireAsset fail after placing an icon PNG on disk manually?▼

Files copied to disk without going through the Lens Studio asset pipeline lack .meta files, making them invisible to requireAsset(). Always import through the IconSelector MCP tool instead of using curl or manual file copies.

What size and style options does the IconSelector tool support?▼

The tool defaults to Rounded style, weight 600, no fill, white color, and 512px size. Valid sizes are 256, 384, 512, 768, and 1024. Overriding appearance values adds a suffix to the filename, which can break requireAsset lookups.

Why does my imported icon appear corrupted after a fresh git clone?▼

If the project's .gitattributes routes Assets/**/* through git-lfs, icon PNGs are stored as LFS pointers and requireAsset loads pointer text. Add Assets/Icons/*.png !filter !diff !merge to .gitattributes so icons are stored inline.

Related Skills

Explore More Software Engineering Skills→
specs-devsspecs-devs

mcp-how-to

Configure an MCP server in Lens Studio and wire Cursor Code or Claude Code.

Official
Advanced
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate
BojackxiangBojackxiang

主题颜色规范

Define blue-cyan gradient tokens and shadow rules for UI components.

Community
Basic
specs-devsspecs-devs

api-custom-locations

Plan and implement location-locked AR experiences by linking Lens content to real-world scans.

Official
Advanced