skills.rest
wikimedia
wikimediaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

codex-icons

Import constants from @wikimedia/codex-icons and render them with CdxIcon in Vue templates.

7|6|Updated Apr 28, 2026
Search Tags:#accessibility#vue#icons#rtl#codex-icons#cdxicon#langcode
One-click install
npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codex-icons
Source: https://github.com/wikimedia/ProtoWiki/tree/main/.agents/skills/codex-icons
Command: npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Codex icons provide a single, standard catalog of icons for UI, ensuring consistent branding, accessibility, and correct handling of bidi and language variants across apps.

Core Features & Use Cases

  • Import icons from @wikimedia/codex-icons and render with CdxIcon.
  • Look up icons in references/icons.md or the upstream catalogue to ensure correct names and RTL/langCode variants.
  • Handle accessibility patterns and language-specific glyphs, including bidi aware icons.
  • Use in ProtoWiki or Vue apps for consistent iconography across features like toolbars, menus, and actions.

Quick Start

Import the codex icon constants and render them with the CdxIcon component in your Vue template.

Frequently Asked Questions about codex-icons

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

FAQPage Schema
How do I render Codex icons in a Vue application?▼

To render Codex icons in a Vue application, import the required icon constants from the @wikimedia/codex-icons package and pass them to the CdxIcon component in your template. This ensures consistent iconography across your interface.

What is the best way to ensure icon accessibility and RTL mirroring in multilingual interfaces?▼

Using Codex icons ensures icon accessibility and RTL mirroring in multilingual interfaces by providing a standard catalog with built-in bidi-aware handling and correct language-specific glyphs based on the langCode variants.

Can I use custom icon descriptors with CdxIcon for UI components?▼

Yes, you can use custom icon descriptors with CdxIcon. The system supports custom icon descriptors alongside standard lookups in references/icons.md and the upstream catalogue to render specific iconography.

How do I look up correct Codex icon names for my features?▼

You look up correct Codex icon names by checking the references/icons.md file or the upstream catalogue. This ensures you use the right names and apply any necessary RTL or langCode variants for your UI.

Does the Codex icon system handle language-specific glyphs automatically?▼

Yes, the Codex icon system handles language-specific glyphs automatically. It applies langCode variants and bidi-aware logic to ensure correct icon rendering across multilingual interfaces.

Related Skills

Explore More Software Engineering Skills→
wikimediawikimedia
7

protowiki-update-codex

Upgrade ProtoWiki Codex packages in lockstep and propagate documented changes.

Official
Advanced
slingr-stackslingr-stack

frontend-views

Standardize Drumr React view components with routing, layouts, and GraphQL types.

Official
Advanced
wikimediawikimedia
7

codex-usage

Adopt Wikimedia Codex design system components, tokens, and icons in frontend projects.

Official
Advanced
AIA-11-HN-MIBAIA-11-HN-MIB
1

remix-icon

Provide 3,100+ RemixIcon icons in line and fill variants for web and mobile UI.

Official
Intermediate