Repolode
제출하기
asorn

asorn/qingicon-open

AI, 클라우드, 웹 제품을 위한 3,900개 이상의 무료 오픈소스 중립 스타일 UI 아이콘과 React·Vue 컴포넌트

GitHub에서 보기웹사이트
스타
56
포크
3
열린 이슈
0
마지막 커밋
29일 전

어떤 프로젝트인가요?

QingIcon은 AI, 클라우드, 인터넷 제품을 위한 UI 아이콘 라이브러리입니다. 34개 카테고리에 걸쳐 Line 스타일 아이콘 3,900개 이상을 제공하며, Fill 변형은 현재 추가 작업 중입니다. 모든 아이콘이 동일한 그리드와 시각적 비중을 따르므로 함께 사용해도 어색하지 않습니다.

웹사이트에서 아이콘을 둘러보고 검색하고 복사하거나 다운로드할 수 있습니다. SVG, PNG, WebP 다운로드와 SVG, React, Vue 또는 DataURL 형식의 원클릭 복사를 지원합니다. 검색에는 중국어 분절 및 퍼지 매칭을 지원하는 중국어·영어 키워드 137,235개가 포함됩니다. 내보내기 전에 선 굵기, 크기, 색상을 조정할 수 있습니다.

개발자를 위해 아이콘별 컴포넌트 하나씩 제공하고 tree-shaking을 지원하는 qingicon-react 및 qingicon-vue npm 패키지를 제공합니다. 또한 Cursor와 Claude Code 같은 AI 코딩 도구에서 아이콘을 검색하고 컴포넌트 코드를 생성할 수 있는 qingicon-mcp 서버도 제공합니다. Figma 플러그인도 사용할 수 있습니다.

핵심 기능

  • 0134개 카테고리에 3,900개 이상의 아이콘 제공, 현재 Line 스타일 사용 가능
  • 02모든 아이콘에 통일된 그리드와 시각적 비중 적용
  • 03퍼지 매칭을 지원하는 중국어·영어 키워드 검색
  • 04tree-shaking 및 TypeScript를 지원하는 React·Vue 컴포넌트
  • 05AI 코딩 도구 내에서 아이콘 코드를 생성하는 MCP 서버
  • 06SVG, PNG, WebP로 내보내거나 React, Vue, DataURL 형식으로 복사

활용 사례

  • 모델, 에이전트, 프롬프트 아이콘이 필요한 AI 제품 UI 구축
  • 일관된 서버 및 네트워크 아이콘을 활용한 클라우드 콘솔이나 SaaS 대시보드 디자인
  • npm 컴포넌트를 통해 React 또는 Vue 프로젝트에 아이콘 추가
  • AI 코딩 어시스턴트가 프런트엔드 코드를 생성하면서 아이콘을 선택하고 삽입하도록 지원

빠른 시작

  1. 1

    npm에서 React 컴포넌트 패키지를 설치하세요

    npm install qingicon-react
  2. 2

    npm에서 Vue 컴포넌트 패키지를 설치하세요

    npm install qingicon-vue

사용 전 알아둘 점

  • Sketch 스타일은 웹사이트와 Figma 플러그인에서만 사용할 수 있으며, npm 패키지나 MCP에서는 사용할 수 없습니다.
  • Fill 스타일 변형은 아직 제작 중이며 완성되지 않았습니다.
  • 개인 제작자가 비영리 프로젝트로 운영하고 있습니다.

포함된 컬렉션

프론트엔드 프레임워크 & UI 컴포넌트

토픽

#icons#ui-components#svg#react#vue#design-system#figma

자주 묻는 질문

qingicon-open은(는) 무엇인가요?
AI, 클라우드, 웹 제품을 위한 3,900개 이상의 무료 오픈소스 중립 스타일 UI 아이콘과 React·Vue 컴포넌트 QingIcon은 AI, 클라우드, 인터넷 제품을 위한 UI 아이콘 라이브러리입니다. 34개 카테고리에 걸쳐 Line 스타일 아이콘 3,900개 이상을 제공하며, Fill 변형은 현재 추가 작업 중입니다. 모든 아이콘이 동일한 그리드와 시각적 비중을 따르므로 함께 사용해도 어색하지 않습니다.
qingicon-open은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
qingicon-open은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
qingicon-open은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. qingicon-open의 마지막 커밋은 2026년 10월 8일입니다.
qingicon-open은(는) 어디에 사용할 수 있나요?
모델, 에이전트, 프롬프트 아이콘이 필요한 AI 제품 UI 구축 일관된 서버 및 네트워크 아이콘을 활용한 클라우드 콘솔이나 SaaS 대시보드 디자인 npm 컴포넌트를 통해 React 또는 Vue 프로젝트에 아이콘 추가 AI 코딩 어시스턴트가 프런트엔드 코드를 생성하면서 아이콘을 선택하고 삽입하도록 지원
qingicon-open는 어떻게 설치하나요?
npm에서 React 컴포넌트 패키지를 설치하세요: npm install qingicon-react npm에서 Vue 컴포넌트 패키지를 설치하세요: npm install qingicon-vue
qingicon-open은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/asorn/qingicon-open

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트