허브 · 도구 55개 · 섹션 5개

아이콘, 폰트, 컬러, 3D, 셰이더

인터페이스에 마지막으로 입히는 레이어입니다. React 패키지로 제공되는 아이콘 세트, 서체와 타이포그래피 도구, UI를 위한 컬러 시스템, 그리고 렌더 팜 없이도 깊이를 더해주는 3D·셰이더 도구를 모았습니다.

01 / 05

React·웹 아이콘 라이브러리

30섹션 열기

Lucide preview

Lucide아이콘Feather에서 포크되어 커뮤니티가 운영하며, 인터페이스용 수천 개의 글리프를 담은 오픈 아이콘 세트입니다.

phosphoricons.com

Phosphor preview

Phosphor아이콘인터페이스 디자인을 위해 일관된 여섯 가지 두께로 제공되는 유연한 아이콘 패밀리입니다.

Iconify preview

Iconify아이콘방대한 아이콘을 즉시 가져다 쓸 수 있게 해 주는 통합 프레임워크입니다.

Rune Icons preview

Rune Icons아이콘인터페이스를 위해 다섯 가지 스타일로 제공되는 미니멀한 아이콘 세트입니다.

Icon Museum아이콘돋보이는 모바일 앱 아이콘에 담긴 장인정신을 기리는 아카이브입니다.

Tabler Icons preview

Tabler Icons아이콘사용자 인터페이스 구축을 위한 수천 개의 아웃라인 스타일 아이콘 라이브러리입니다.

Heroicons preview

Heroicons아이콘Tailwind CSS 프레임워크를 만든 팀이 직접 제작한 SVG 아이콘입니다.

fonts.google.com

Material Symbols preview

Material Symbols아이콘인터페이스를 위해 세 가지 스타일을 선택할 수 있는 Google의 가변 아이콘 폰트입니다.

icons.getbootstrap.com

Bootstrap Icons preview

Bootstrap Icons아이콘Bootstrap 프레임워크와 짝을 이루도록 만들어진 공식 SVG 아이콘 라이브러리입니다.

Remix Icon아이콘아웃라인과 채움 두 가지 버전으로 제공되는 중립적인 디자인의 아이콘 라이브러리입니다.

Iconoir preview

Iconoir아이콘균일하고 일관된 선 두께로 그려진 오픈소스 SVG 아이콘 세트입니다.

Ionicons preview

Ionicons아이콘웹과 모바일 인터페이스 전반에서 쓰도록 디자인된 완성도 높은 아이콘 팩입니다.

simpleicons.org

Simple Icons preview

Simple Icons아이콘각각 SVG 형식으로 제공되는 3,000개 이상의 인기 브랜드 로고 모음입니다.

theSVG preview

theSVG아이콘SVG 형식으로 제공되는, 깔끔하고 바로 쓸 수 있는 엄선된 브랜드 로고 세트입니다.

feathericons.com

Feather preview

Feather아이콘모든 글리프를 24픽셀 그리드에 그린 미니멀한 오픈소스 아이콘 세트입니다.

carbondesignsystem.com

Carbon Icons preview

Carbon Icons아이콘엔터프라이즈급 제품 디자인을 위해 만들어진 IBM의 공식 아이콘 라이브러리입니다.

Boxicons preview

Boxicons아이콘세 가지 뚜렷한 스타일로 제작되어 제공되는 벡터 아이콘 세트입니다.

mx-icons.vercel.app

MX Icons preview

MX Icons아이콘React 컴포넌트로 패키징된 대규모의 커스터마이즈 가능한 아이콘 모음입니다.

akveo.github.io

Eva Icons preview

Eva Icons아이콘인터페이스를 위해 아웃라인과 채움 두 가지 스타일로 제공되는 400개 아이콘 팩입니다.

Devicon preview

Devicon아이콘널리 쓰이는 프로그래밍 언어와 개발자 도구를 아우르는 아이콘 세트입니다.

css.gg preview

css.gg아이콘SVG가 아닌 순수 CSS만으로 렌더링되는 700개의 가벼운 아이콘 세트입니다.

HugeIcons preview

HugeIcons아이콘스트로크와 솔리드 두 가지 스타일로 아이콘을 제공하는 폭넓은 아이콘 라이브러리입니다.

Reicon preview

Reicon아이콘두 가지 두께로 아이콘을 제공하는, 트리 셰이킹이 가능한 React 아이콘 라이브러리입니다.

Iconsax preview

Iconsax아이콘UI 작업을 위해 여섯 가지 스타일로 제공되는 다재다능한 아이콘 세트입니다.

icons0 preview

icons0아이콘20만 개가 넘는 아이콘 중에서 원하는 것을 찾아 주는 검색 엔진입니다.

heroicons-animated.com

Heroicons Animated preview

Heroicons Animated아이콘인터랙티브 UI를 위해 호버 시 재생되는 애니메이션을 더해 Heroicons를 새롭게 다듬은 아이콘 세트입니다.

Icons.download preview

Icons.download아이콘열여섯 가지 서로 다른 스타일 중에서 골라 쓸 수 있도록 엄선한 아이콘 라이브러리입니다.

lucide-animated.com

Lucide Animated preview

Lucide Animated아이콘생동감 있는 인터페이스를 위해 마이크로 애니메이션을 기본 탑재해 Lucide 아이콘 세트를 재구성한 것입니다.

iconfoundry.store

Icon Foundry아이콘다양한 아이콘 패밀리를 한데 모아 검색할 수 있는 아카이브입니다.

Inkword preview

Inkword아이콘단어 하나를 입력하면 그에 어울리는 일러스트를 생성해 줍니다.

02 / 05

웹사이트를 위한 폰트와 타이포그래피 도구

Fontshare preview

Fontshare폰트상업 프로젝트에서 무료로 쓸 수 있는 전문가급 폰트 라이브러리입니다.

Klim preview

Klim폰트웹 전반에서 쓸 수 있는 현대적인 서체를 디자인하는 타입 파운드리입니다.

Fontsource preview

Fontsource폰트오픈소스 폰트를 npm 패키지로 설치해 프로젝트에서 직접 호스팅할 수 있습니다.

wakamaifondue.com

Wakamai Fondue preview

Wakamai Fondue폰트폰트 파일을 분석해 각 폰트가 지원하는 기능을 보여 주는 도구입니다.

Utopia preview

Utopia폰트바로 쓸 수 있는 CSS clamp 값을 출력해 주는 유동형 타이포그래피 계산기입니다.

Velvetyne preview

Velvetyne폰트실험적이고 자유 라이선스의 서체를 배포하는 오픈소스 타입 파운드리입니다.

departuremono.com

Departure Mono preview

Departure Mono폰트터미널에 자연스럽게 어울리도록 디자인된 픽셀 스타일의 모노스페이스 서체입니다.

03 / 05

인터페이스 디자인을 위한 컬러 도구

OKLCH preview

OKLCH컬러지각적으로 균일한 색 공간을 기반으로 UI 색상을 고르는 컬러 피커입니다.

Color.review preview

Color.review컬러접근성을 유지하는 색상 팔레트를 만들도록 돕는 대비 검사 도구입니다.

huetone.ardov.me

Huetone preview

Huetone컬러대비 비율을 조절해 UI 색상의 접근성을 유지해 주는 팔레트 생성기입니다.

APCA preview

APCA컬러실제로 눈이 색을 인지하는 방식에 맞춘 최신 대비 알고리즘입니다.

Ramps preview

Ramps컬러OKLCH 공간에서 매끄러운 색상 램프를 생성하는 디자인 토큰 도구입니다.

04 / 05

웹을 위한 3D 도구와 에셋

Three.js preview

Three.js3DWebGL로 브라우저에서 3D 그래픽을 만들고 표시하는 JavaScript 라이브러리입니다.

r3f.docs.pmnd.rs

React Three Fiber preview

React Three Fiber3DThree.js 장면을 컴포넌트로 구성할 수 있게 해 주는 선언형 React 렌더러입니다.

drei.docs.pmnd.rs

Drei preview

Drei3DReact Three Fiber 프로젝트의 작업 속도를 높여 주는 기성 헬퍼 컴포넌트 모음입니다.

Blender preview

Blender3D웹용 장면을 위한 3D 모델링, 애니메이션, 렌더링을 아우르는 오픈소스 제작 도구입니다.

gltf.report preview

gltf.report3DglTF 에셋을 분석하고 용량을 줄여 웹에서 3D 모델이 더 빠르게 로드되도록 하는 브라우저 도구입니다.

Poly Haven preview

Poly Haven3D어떤 프로젝트에서든 무료로 내려받아 재사용할 수 있는 CC0 라이선스 텍스처 공개 라이브러리입니다.

05 / 05

WebGL 셰이더와 셰이더 그라데이션

thebookofshaders.com

Book of Shaders preview

Book of Shaders셰이더프래그먼트 셰이더 작성법을 단계별로 익히게 해 주는 인터랙티브 실습 가이드입니다.

compute.toys preview

compute.toys셰이더WGSL 컴퓨트 셰이더를 작성하고 실험할 수 있는 온라인 샌드박스입니다.

Shaderfrog preview

Shaderfrog셰이더그래프 노드를 연결해 셰이더를 만드는 노드 기반 비주얼 에디터입니다.

shadercn preview

shadercn셰이더vgpu와 TypeGPU를 기반으로 만들어져 프로젝트에 바로 넣어 쓸 수 있는 React 셰이더 컴포넌트입니다.

shaders.paper.design

Paper Shaders preview

Paper Shaders셰이더웹 프로젝트에 바로 임포트할 수 있고 의존성이 전혀 없는 셰이더입니다.

openshaders.com

OpenShaders preview

OpenShaders셰이더웹 프로젝트에 바로 넣어 쓸 수 있는 WebGL 셰이더 오픈소스 라이브러리입니다.

orbkit.zzzzshawn.cloud

Orbkit preview

Orbkit셰이더브라우저에서 애니메이션 오브 효과를 만드는 WebGL 기반 렌더러입니다.

아이콘·폰트·컬러·3D·셰이더 도구 (55) — Designeer