Use SVGIcons as a Claude Custom Connector to Find Icons Faster

查看原文 / View Original 编辑 / Edit

Use SVGIcons as a Claude Custom Connector to Find Icons Faster

使用 SVGIcons 作为 Claude 自定义连接器，更快速地查找图标

Finding the right icon is one of those small tasks that can quietly interrupt your development flow. You are building a dashboard, a landing page, a settings screen, or a SaaS interface. You need a clean SVG icon. You open a new tab, search manually, compare styles, copy an SVG, maybe optimize it, then come back to your code. It works, but it breaks focus. 寻找合适的图标是那些会悄悄打断开发流程的小任务之一。当你正在构建仪表板、落地页、设置界面或 SaaS 界面时，你需要一个简洁的 SVG 图标。你打开一个新标签页，手动搜索、对比样式、复制 SVG、可能还需要进行优化，然后再回到代码中。虽然这行得通，但它会打断你的专注力。

That is why I created a way to use SVGIcons as a Claude Custom Connector. With it, Claude can search SVG icons directly from your conversation, helping you discover relevant icons faster while you are designing or coding. 这就是我创建将 SVGIcons 作为 Claude 自定义连接器的方法的原因。有了它，Claude 可以直接在对话中搜索 SVG 图标，帮助你在设计或编码时更快地发现相关图标。

What is SVGIcons? SVGIcons is a search engine for SVG icons built for developers. It helps you find SVG icons for interfaces, apps, websites, dashboards, documentation, and design systems. Instead of browsing icon sets manually, you can search by intent: settings icon, database icon, AI assistant icon, download cloud icon, user profile icon, calendar outline icon, security shield icon. The goal is simple: make icon discovery faster and more developer-friendly. 什么是 SVGIcons？SVGIcons 是一个专为开发者打造的 SVG 图标搜索引擎。它能帮你为界面、应用、网站、仪表板、文档和设计系统找到 SVG 图标。你无需手动浏览图标集，而是可以按意图搜索，例如：设置图标、数据库图标、AI 助手图标、下载云图标、用户资料图标、日历轮廓图标、安全盾牌图标。其目标很简单：让图标发现过程更快捷、对开发者更友好。

Why connect it to Claude? Claude is useful for coding, UI planning, product copy, documentation, and design thinking. But when you need visual assets, you often leave the AI conversation and search somewhere else. By connecting SVGIcons as a custom connector, you can ask Claude things like: “Find me a simple SVG icon for a user profile button.” Or: “I am building a SaaS dashboard. Suggest icons for analytics, users, billing, API keys, and settings.” Claude can then use SVGIcons as a source to help you find matching SVG icons without leaving the conversation. 为什么要将其连接到 Claude？Claude 在编码、UI 规划、产品文案、文档编写和设计思维方面非常有用。但当你需要视觉素材时，往往不得不离开 AI 对话去别处搜索。通过将 SVGIcons 作为自定义连接器接入，你可以问 Claude 诸如：“帮我找一个用于用户资料按钮的简单 SVG 图标。”或者：“我正在构建一个 SaaS 仪表板，请为分析、用户、账单、API 密钥和设置建议一些图标。”Claude 随后便能利用 SVGIcons 作为来源，帮你找到匹配的 SVG 图标，而无需离开对话界面。

Example use cases

应用场景示例

  1. Finding icons for a dashboard: Find SVG icons for a SaaS dashboard sidebar: Home, Analytics, Customers, Billing, Settings. This is useful when you are building a UI and want a consistent set of icon ideas quickly.

  2. 为仪表板查找图标：为 SaaS 仪表板侧边栏查找 SVG 图标：首页、分析、客户、账单、设置。当你正在构建 UI 并希望快速获得一套风格统一的图标方案时，这非常有用。

  3. Getting icon suggestions from a feature list: Here are my app features: Team management, API access, Notifications, Reports, Security. Suggest matching SVG icons for each feature. Instead of manually translating features into icon keywords, Claude can help generate better icon search queries.

  4. 根据功能列表获取图标建议：这是我的应用功能：团队管理、API 访问、通知、报告、安全性。请为每个功能建议匹配的 SVG 图标。Claude 可以帮你生成更好的图标搜索查询，而不是让你手动将功能翻译成图标关键词。

  5. Improving empty states: I need an icon for an empty state where no files have been uploaded yet. This type of search is more semantic than just typing “file icon.” You can ask for the meaning of the state, not only the exact object.

  6. 优化空状态：我需要一个用于“尚未上传任何文件”的空状态图标。这种搜索方式比单纯输入“文件图标”更具语义化。你可以询问状态的含义，而不仅仅是具体的对象。

  7. Choosing icons for documentation: Find SVG icon ideas for a developer documentation page: Installation, Configuration, Authentication, API Reference, Troubleshooting. This can be helpful when creating docs, onboarding pages, or technical landing pages.

  8. 为文档选择图标：为开发者文档页面寻找 SVG 图标创意：安装、配置、身份验证、API 参考、故障排除。这在创建文档、引导页面或技术落地页时非常有帮助。

Why SVG is still ideal for developers

为什么 SVG 对开发者来说依然是理想选择

SVG remains one of the best formats for UI icons because it is: scalable without losing quality, text-based, easy to inline in HTML, styleable with CSS, scriptable when needed, and usually lightweight for interface graphics. SVG 依然是 UI 图标的最佳格式之一，因为它具备以下优点：缩放不失真、基于文本、易于嵌入 HTML、可通过 CSS 设置样式、必要时可脚本化，且对于界面图形而言通常非常轻量。

For web interfaces, SVG icons are still one of the most flexible options. You can use them in: <img src="/icons/settings.svg" alt="Settings"> Or inline them directly: <button class="icon-button" aria-label="Settings"> <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"> <!-- SVG paths here --> </svg> </button>. Inline SVG is especially useful when you want to control color, size, hover states, or animation from CSS. 对于 Web 界面，SVG 图标仍然是最灵活的选择之一。你可以通过 <img src="/icons/settings.svg" alt="Settings"> 使用它们，或者直接内联：<button class="icon-button" aria-label="Settings"> <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"> <!-- SVG paths here --> </svg> </button>。当你想要通过 CSS 控制颜色、大小、悬停状态或动画时，内联 SVG 特别有用。

A better workflow

更优的工作流

The main benefit is not just faster search. It is keeping your workflow in one place. Instead of switching between your code editor, Claude, an icon website, your browser tabs, and your design system, you can stay in the AI conversation and ask for icon ideas in context. For example: “I am creating a pricing page for a developer tool. Find SVG icons for these sections: Free plan, Pro plan, Enterprise plan, Support, Security.” Claude already understands the context, so the icon suggestions can be more relevant. 主要好处不仅仅是搜索更快，而是将你的工作流整合在同一个地方。你无需在代码编辑器、Claude、图标网站、浏览器标签页和设计系统之间来回切换，而是可以留在 AI 对话中，根据上下文询问图标创意。例如：“我正在为一个开发者工具创建定价页面。请为这些部分查找 SVG 图标：免费计划、专业计划、企业计划、支持、安全性。”由于 Claude 已经理解了上下文，图标建议会更加相关。

Tips for better icon prompts

获取更好图标提示词的技巧

When searching icons through Claude, be specific. Instead of: “Find an icon for app.” Try: “Find a minimal outline SVG icon for a desktop application launcher.” Instead of: “Find a user icon.” Try: “Find a simple monochrome SVG icon for user account settings.” 通过 Claude 搜索图标时，请具体一点。不要说：“找一个应用图标。”试着说：“找一个用于桌面应用启动器的极简轮廓 SVG 图标。”不要说：“找一个用户图标。”试着说：“找一个用于用户账户设置的简单单色 SVG 图标。”

Good prompts usually include: the object, the visual style, the usage context, and the desired tone. 好的提示词通常包含：对象、视觉风格、使用场景和期望的基调。

Try it

立即尝试

You can explore the SVG icon search engine here: https://svgicons.com/svg-icon-search-engine. And if you use Claude, you can connect SVGIcons as a custom connector to search icons directly from your AI workflow. 你可以在这里探索 SVG 图标搜索引擎：https://svgicons.com/svg-icon-search-engine。如果你使用 Claude，可以将 SVGIcons 作为自定义连接器接入，直接在你的 AI 工作流中搜索图标。

Final thoughts

结语

Icons are small, but they matter. They improve navigation, make interfaces easier to scan, and help users understand actions faster. By connecting SVGIcons to Claude, icon search becomes part of your development workflow instead of a separate interruption. That is the idea: fewer context switches, faster UI decisions, and better SVG icon discovery for developers. 图标虽小，意义重大。它们能改善导航，使界面更易于浏览，并帮助用户更快地理解操作。通过将 SVGIcons 连接到 Claude，图标搜索成为了你开发工作流的一部分，而不是一次额外的打断。这就是核心理念：减少上下文切换，加快 UI 决策，并为开发者提供更好的 SVG 图标发现体验。

← 返回新闻列表 / Back to news list