Skill

icon-replacement

Find replacement icons for migration. Use when migrating old code that uses icons not available in the new system, or when you need to find a suitable icon from the available icon set.

From one-ui-migration

Install

Run in your terminal

npx claudepluginhub michael0520/milo-claudekit --plugin one-ui-migration

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Find and suggest replacement icons during migration. This skill provides the complete list of available icons in the One-UI system.

Arguments

$ARGUMENTS - Query or command:
- <old-icon-name> - Find a replacement for a specific icon
- list - Show all available icons
- search <keyword> - Search icons by keyword
- category <name> - Show icons by category (navigation, action, status, network, file, etc.)

Available Icons

Navigation & Menu

icon:arrow_back
icon:arrow_forward
icon:arrow_left
icon:arrow_right
icon:arrow_upward
icon:arrow_downward
icon:arrow_drop_down
icon:arrow_drop_up
icon:arrow_circle_down
icon:arrow_circle_up
icon:navigate_before
icon:navigate_next
icon:first_page
icon:last_page
icon:keyboard_arrow_down
icon:keyboard_arrow_up
icon:menu
icon:apps
icon:home
icon:dashboard

Actions

icon:add
icon:add_box
icon:add_circle
icon:add_link
icon:remove
icon:remove_circle
icon:edit
icon:edit_attributes
icon:edit_notifications
icon:edit_off
icon:delete_forever
icon:save
icon:cancel
icon:clear
icon:done
icon:check_circle
icon:refresh
icon:sync_alt
icon:loop
icon:undo
icon:redo
icon:download
icon:upload
icon:send
icon:forward
icon:launch
icon:search
icon:filter_alt
icon:tune
icon:settings
icon:settings_applications
icon:settings_ethernet
icon:settings_input_component
icon:settings_power
icon:settings_remote
icon:settings_suggest
icon:build
icon:create_new_folder
icon:attach_file
icon:file_copy
icon:link
icon:link_off
icon:login
icon:lock
icon:lock_open
icon:vpn_key
icon:fullscreen
icon:fullscreen_exit
icon:drag_indicator
icon:place_item

Status & Indicators

icon:info
icon:info_outline
icon:help
icon:help_outline
icon:warning
icon:error
icon:priority_high
icon:notifications
icon:notifications_active
icon:notifications_none
icon:notifications_off
icon:circle
icon:panorama_fish_eye
icon:highlight_off
icon:hide_source
icon:visibility
icon:visibility_off
icon:task_alt
icon:pending_actions
icon:running_with_errors
icon:sync_disabled
icon:sync_problem
icon:troubleshoot
icon:verified_user
icon:policy
icon:security

Files & Documents

icon:folder
icon:folder_off
icon:folder_open
icon:article
icon:description
icon:assignment
icon:inventory
icon:archive
icon:unarchive

People & Accounts

icon:person
icon:account_box
icon:account_tree
icon:group_work
icon:engineering-maintenance

Time & Schedule

icon:schedule
icon:schedule_send
icon:today
icon:event_busy
icon:event_note
icon:history
icon:update
icon:upgrade

UI Elements

icon:star
icon:star_border
icon:favorite
icon:favorite_border
icon:bookmark_star
icon:push_pin
icon:outlined-push_pin
icon:label
icon:local_offer
icon:category
icon:style
icon:widgets
icon:extension
icon:more_vert
icon:unfold_less
icon:unfold_more
icon:density_large
icon:density_medium
icon:density_small
icon:view_headline
icon:grid
icon:format_list_numbered_rtl

Trends & Analytics

icon:trending_up
icon:trending_down
icon:trending_flat
icon:calculate
icon:functions

Location & GPS

icon:location
icon:my_location
icon:gps_fixed
icon:near_me
icon:outlined-near_me
icon:apartment
icon:room_preferences

Media & Image

icon:camera
icon:image-outline
icon:wallpaper
icon:center_focus_weak

Communication

icon:email
icon:mark_email_unread
icon:sms
icon:phone
icon:outlined-feedback

Play Controls

icon:play_circle
icon:pause_circle
icon:restart_alt
icon:power_settings_new
icon:left_circle

MX Custom Icons (Moxa-specific)

icon:mx-509_certificate
icon:mx-application_cog_outline
icon:mx-application_empty
icon:mx-calendar_clock
icon:mx-circle_dash
icon:mx-cog-off
icon:mx-cursor-add-outline
icon:mx-cursor-add
icon:mx-cursor-outline
icon:mx-cursor
icon:mx-default_route
icon:mx-empty_state_404
icon:mx-empty_state_500
icon:mx-empty_state_box
icon:mx-empty_state_module_not_found
icon:mx-ethernet_port
icon:mx-export
icon:mx-file-eye-outline
icon:mx-file_cog_outline
icon:mx-folder-cog
icon:mx-form-textbox
icon:mx-forward
icon:mx-grid
icon:mx-horizontal-line
icon:mx-horizontal_align_center
icon:mx-https
icon:mx-ip_network_outline
icon:mx-lan
icon:mx-moxa_device_extension
icon:mx-moxa_m
icon:mx-network_service
icon:mx-package_update
icon:mx-redundancy
icon:mx-remote_vpn
icon:mx-restart
icon:mx-ring
icon:mx-router_empty
icon:mx-safety_check
icon:mx-scan_device
icon:mx-switching
icon:mx-system-dashboard
icon:mx-tag-search
icon:mx-ungroup
icon:mx-verified_error
icon:mx-verified_unknow
icon:mx-vertical-line
icon:mx-wan

Project Types

icon:project_type_agt
icon:project_type_tpe
icon:apollo_project
icon:tenancy

Misc

icon:local_activity
icon:card_membership
icon:medical_information
icon:dynamic_form
icon:shape_line_outline
icon:cleaning_services
icon:low_priority
icon:multiple_stop
icon:terminal
icon:vertical_align_center
icon:pan_tool
icon:pan_tool-outline
icon:outlined-gpp_bad
icon:outlined-stop_circle
icon:outlined-verified_user
icon:outlined-view_week

Common Icon Replacements

When migrating from legacy icons, use these suggested replacements:

Legacy Icon	Replacement	Reason
`close`	`icon:clear` or `icon:cancel`	Clear for dismiss, cancel for cancel action
`check`	`icon:done` or `icon:check_circle`	Done for simple check, check_circle for emphasis
`add_circle_outline`	`icon:add_circle`	Unified style
`remove_circle_outline`	`icon:remove_circle`	Unified style
`settings_outline`	`icon:settings`	Unified style
`cloud_upload`	`icon:cloud-upload-outline`	Use outline variant
`cloud_download`	`icon:download`	Use generic download
`file_download`	`icon:download`	Use generic download
`file_upload`	`icon:upload`	Use generic upload
`exit_to_app`	`icon:login` or `icon:launch`	Login for auth, launch for external
`open_in_new`	`icon:launch`	Use launch for external links
`content_copy`	`icon:file_copy`	Use file_copy
`feedback`	`icon:outlined-feedback`	Use outlined variant
`pin`	`icon:push_pin`	Use push_pin
`ethernet`	`icon:settings_ethernet` or `icon:mx-ethernet_port`	Use MX variant for ports
`network_check`	`icon:network_manage`	Use network_manage
`vpn_lock`	`icon:mx-remote_vpn`	Use MX VPN icon
`restart`	`icon:restart_alt` or `icon:mx-restart`	Use MX variant if available
`sync`	`icon:sync_alt` or `icon:loop`	sync_alt for bidirectional, loop for repeat
`bolt`	`icon:power_settings_new`	Use power icon
`certificate`	`icon:mx-509_certificate`	Use MX certificate icon

Workflow

For `<old-icon-name>` query:

Search for exact match in available icons
If not found, suggest closest alternatives based on:
- Semantic meaning
- Visual similarity
- Common use cases
Provide 2-3 options with explanations

For `search <keyword>`:

Search icon names containing the keyword
Return all matches grouped by category

For `category <name>`:

Return all icons in that category
Categories: navigation, action, status, network, file, people, time, ui, trend, location, media, communication, play, mx, project, misc

Output Format

For replacement queries:

## Icon Replacement for `{old-icon}`

**Recommended:** `icon:{recommended}` - {reason}

**Alternatives:**
- `icon:{alt1}` - {reason1}
- `icon:{alt2}` - {reason2}

**Usage:**
```html
<mat-icon svgIcon="{recommended}"></mat-icon>


### For search/list:

Icons matching "{keyword}"

{Category 1}

icon:name1
icon:name2

{Category 2}

icon:name3

Similar Skills

cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

138.5k

brand-guidelines

1 file

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

99.3k

algorithmic-art

3 files

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

99.3k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitJan 24, 2026

Actions

View Source View Plugin View on GitHub View README

icon-replacement

Arguments

Available Icons

Navigation & Menu

Actions

Status & Indicators

Network & Connectivity

Files & Documents

People & Accounts

Time & Schedule

UI Elements

Trends & Analytics

Location & GPS

Media & Image

Communication

Play Controls

MX Custom Icons (Moxa-specific)

Project Types

Misc

Common Icon Replacements

Workflow

For <old-icon-name> query:

For search <keyword>:

For category <name>:

Output Format

For replacement queries:

Icons matching "{keyword}"

{Category 1}

{Category 2}

For `<old-icon-name>` query:

For `search <keyword>`:

For `category <name>`: