아이콘 검색 크기, 색상, 선 두께를 조정할 수 있는 오픈소스 SVG 아이콘을 검색하고 사용자 지정합니다.

🎨

아이콘 검색

크기, 색상, 선 두께를 조정할 수 있는 오픈소스 SVG 아이콘을 검색하고 사용자 지정합니다.

아이콘 검색

키워드를 입력하여 여러 카테고리의 아이콘을 이름으로 필터링합니다.

외观 커스터마이징

아이콘의 색상, 크기 및 선 너비를 디자인에 맞게 조정합니다.

SVG 복사

아이콘을 클릭하여 사용자 지정된 SVG 코드를 복사합니다.

Loading tool...

What Is 아이콘 검색?

아이콘 검색 도구를 사용하면 오픈소스 SVG 아이콘을 브라우징, 커스터마이즈, 복사할 수 있습니다. 아이콘은 내비게이션, 액션, 상태 표시기, 시각적 의사소통을 위한 필수적인 UI 요소입니다. 이 도구에는 화살표, 액션, UI, 미디어, 통신, 파일 등 여섯 가지 카테고리의 아이콘이 포함되어 있습니다. 각 아이콘은 색상, 크기 및 스트로크 너비를 원하는대로 커스터마이즈할 수 있는 스트로크 기반 SVG입니다. 키워드로 검색하여 필요한 아이콘을 빠르게 찾을 수 있습니다. 아이콘을 클릭하면 사용자 지정 설정이 적용된 SVG 코드가 복사됩니다. 생성된 SVG는 깨끗하고 접근성이 좋으며 HTML에서 인라인으로 또는 별도의 SVG 파일로 사용할 준비가 되어 있습니다.

Why Use 아이콘 검색?

조직화된 아이콘 카테고리: 화살표, 동작, UI, 미디어 등
빠른 아이콘 발견을 위한 키워드 검색
색상, 크기 및 선 너비를 조정할 수 있음
클린하고 접근 가능한 SVG 코드의 한 번 클릭 복사

Common Use Cases

UI 개발

버튼, 내비게이션 및 인터페이스 요소에 대한 아이콘을 찾고 커스터마이징합니다.

신속한 프로토 타이핑

웹 검색 없이 모의 업과 프로토타입에 대한 아이콘이나 빠르게 가져옵니다.

디자인 일관성

일관된 인터페이스 디자인을 위한 일치하는 선 기반 아이콘 사용

문서화

문서, 가이드 및 README 파일에 시각적인 아이콘이나 추가합니다.

Technical Guide

SVG 아이콘이 `<svg>` 요소와 viewBox를 사용하여 디스플레이 크기와 상관없이 확장합니다. 스트로크 기반 아이콘은 색상에 대한 stroke 속성, 선 두께에 대한 stroke-width 속성 및 선 끝에 대한 stroke-linecap/stroke-linejoin 속성을 사용합니다. fill="none" 속성이 Stroke만 표시되도록 합니다. SVG 아이콘이 HTML에서 직접 CSS 스타일링을 위해 인라인으로 사용될 수 있습니다. 또는 `<img>` src를 통해 간단하게 사용하거나 데이터 URI를 통해 CSS 배경 이미지로 사용할 수 있습니다. 접근성을 위해 장식용 아이콘에는 role="img" 및 aria-label 속성이 추가되어야 하며, 가시적인 텍스트 레이블이 있는 순수한 장식용 아이콘이라면 aria-hidden="true"가 필요합니다. SVG 아이콘이 손실 없이 任意의 크기로 확장할 수 있습니다. 아이콘 시스템을 사용하는 경우 SVG 스프라이트 시트 또는 SVG 정의를 참조하는 아이콘 구성 요소를 고려해 보십시오. currentColor 키워드를 사용하면 아이콘에 부모 요소의 텍스트 색상을 상속시킬 수 있습니다.

Tips & Best Practices

1
일관된 스타일링을 위한 프로젝트 전반의 선 기반 아이콘 사용
2
자동으로 텍스트 색상을 상속받으려면 선 색상을 currentColor로 설정하세요
3
아이콘 크기를 일관되게 유지합니다. 24px는 일반적인 표준 크기입니다.
4
가시적이지 않은 텍스트가 없는 아이콘 버튼에 대한 접근 가능한 aria-label 추가

Related Tools

CSS 버튼 생성기

색상, 패딩, 테두리, 그림자 및 호버 효과로 사용자 지정 CSS 버튼을 디자인합니다.

🎨 CSS & Design

SVG를 CSS 배경으로 변환

데이터 URI 인코딩을 사용하여 SVG 코드를 CSS 배경 이미지로 인코딩합니다.

🎨 CSS & Design

CSS 변수 생성기

색상, 간격, 타이포그래피를 위한 CSS 사용자 지정 속성(변수)을 생성합니다.

🎨 CSS & Design

SVG 패턴 생성기

다양한 모양으로 CSS 배경용 반복되는 SVG 기반 패턴을 생성합니다.

🎨 CSS & Design

Frequently Asked Questions

Q 이러한 아이콘이 무료로 사용할 수 있나요?

예, 이 도구의 모든 아이콘은 오픈 소스이며 개인 및 상업용으로 무료입니다.

Q 아이콘 색상을 변경할 수 있나요?

예, 색상 선택기를 조정하여 모든 아이콘이나 선 색상을 변경합니다.

Q 프로젝트에서 SVG 아이콘을 어떻게 사용하나요?

SVG 코드를 직접 HTML에 붙여넣거나 <img> src로 사용하거나 React 컴포넌트로 변환하세요.

Q 이러한 아이콘이나 리액트에 추가할 수 있나요?

예, SVG 코드를 리액트 컴포넌트에 붙여넣거나 SVG-리액트 컨버터 도구를 사용합니다.

Q 아이콘을 접근 가능하게 만드는 방법은 무엇인가요?

독립형 아이콘 버튼의 경우 aria-label을 추가하거나 가시적인 텍스트와 함께 사용하는 경우 aria-hidden="true"를 사용하세요.

About This Tool

아이콘 검색 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.