What is IconFit?
IconFit is a skill that helps AI select, verify, and export SVG icons from a local repository. The product is designed for developers, designers, and makers who use AI to build websites, dashboards, or applications.

The problem IconFit solves
AI can generate layouts, but icons can still be off in sharpness, mix solid shapes with outlines, or not represent actions correctly. IconFit guides selection based on meaning, position, size, and style of the project, providing a clear basis for icon adjustments.

Main features

• Select icons based on context and existing interface conventions.
• Find and compare candidates in the package repository; prioritize the same set for consistency when needed.
• Verify IDs, view metadata, and check source conditions before use.
• Export local SVG, only including selected files in the project.
• Guide color integration, size, and labeling to support accessibility.

Example 1: Creating a dashboard using AI
You use Claude or ChatGPT or other AI models to brainstorm and create dashboard code, but the navigation bar has a thin home icon, a solid search icon, and a thick settings icon.

In an AI-readable environment with the skill running in the CLI, you request: “Use IconFit to review the navigation icons. Keep the same set of outlines, size 24 px, and fit for each item.”

IconFit guides AI to read the existing conventions, find candidates for each function, compare shapes, and check the sources. After finalizing the selection, AI exports the SVG into the project and integrates it according to the interface conventions. You can review each ID and the selected files.

Example 2: Choosing an icon for the file upload button
You are creating a document upload screen and are uncertain whether to use a cloud shape or an arrow. A request for the AI could be: “Select an icon for the file upload button from the computer, size 20 px, with outlines, synchronized with the existing buttons.”

AI uses IconFit to find candidates related to uploading, matching the meaning of the action, and checking against the expected size. Then it verifies IDs, source conditions, and exports the selected icon. If the meaning is still ambiguous, the skill guides to provide options for you to decide.

The two situations above are illustrative examples of the process, not metrics or customer case studies.

Who should use it?
Developers who are adjusting interfaces created with AI support; designers who want to clearly express requirements regarding icons; makers who need a process to find, verify, and hand over SVG consistently.

How to get started

1. View the process demo: https://iconfit.atech.io.vn/#workflow
2. Try finding and viewing SVGs in the selected samples: https://iconfit.atech.io.vn/#explorer
3. Read the README and terms of use: https://iconfit.atech.io.vn
4. Prepare Node.js according to the requirements in the README. Unzip the entire iconfit folder into a location where the AI can read the skill; keep SKILL.md, scripts, references, and assets together.
5. Start with an icon that needs adjustment, specifying the action, position, size, and style. You can use the CLI directly to manage each step.

Note when using
IconFit selects from an existing repository, it is not a tool that generates every icon using AI. Finding and exporting in packages do not require the icon API or npm install; the AI model may still need the internet.

Reading skills and running tools depend on the AI environment you are using; not every Claude/ChatGPT chat can automatically access folders on the machine.

Each icon source has its own conditions. The part created by ATech Corp retains All rights reserved; icons and third-party runtime keep their source conditions. A general commercial license does not apply to the entire repository.