nutui-icons

Integrate NutUI Icons into Vue and React projects with tree-shakeable SVG imports.

4|Updated Apr 12, 2026

Search Tags:#react #vue #icons #svg #iconography #nutui #tree-shakeable

Ready to run

npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-icons

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nutui-icons
Source: https://github.com/tiantangcao1980-web/DesignDNA-Skills/tree/main/designdna/skills/nutui-icons
Command: npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

NutUI Icons provides a ready-made, scalable SVG icon library for Vue and React projects, ensuring visual consistency and fast UI iteration.

Core Features & Use Cases

Paired with NutUI component libraries for consistent visuals
SVG-based and tree-shakeable for performance
500+ glyphs across categories (navigation, user, e-commerce, etc.)
Size and color customization via props

Use Case: Design dashboards, mobile apps, and admin panels needing cohesive iconography.

Quick Start

Install @nutui/icons-vue or @nutui/icons-react and import only the icons you need into your Vue or React components.

Frequently Asked Questions about nutui-icons

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

FAQPage Schema

How do I add NutUI icons to my Vue or React project?▼

To add NutUI icons, install @nutui/icons-vue or @nutui/icons-react and import the specific SVG glyphs you need directly into your components.

What is tree-shakeable SVG iconography and why use it for mobile apps?▼

Tree-shakeable SVG iconography allows you to import only the icons you use, reducing bundle size and improving performance for mobile apps and dashboards.

Does NutUI icons work with both Vue and React component libraries?▼

Yes, NutUI icons works with both Vue and React by providing separate packages, @nutui/icons-vue and @nutui/icons-react, for cohesive visual integration.

Can I customize the size and color of SVG icons via props?▼

Yes, you can customize SVG icon size and color directly via props when importing glyphs from the NutUI icons library into your components.

What's the best way to ensure visual consistency for e-commerce UI icons?▼

Using a cohesive SVG icon library like NutUI icons provides 500+ glyphs across categories, ensuring visual consistency for e-commerce UIs and admin panels.