무료 SVG 아이콘 사이트 2곳 CSS 적용 방법

무료 SVG 아이콘 사이트 두 곳을 소개합니다. 아이콘들이 굉장히 많고 예뻐서 저는 이 두 사이트를 가장 많이 이용합니다. 이 글에서는 무료 SVG 아이콘 사이트 소개와 함께 SVG 아이콘을 CSS로 적용하는 방법까지 알아보겠습니다.

무료 SVG 아이콘 사이트

아래 소개하는 사이트는 아이콘을 SVG뿐만 아니라 PNG 등의 그래픽 파일로 다운로드할 수 있습니다. 아이콘 세트마다 라이센스가 다르니 꼭 확인 후 사용하시길 바랍니다.

SVGrepo

SVGrepo는 다양한 벡터 그래픽 파일을 제공하는 웹사이트입니다. SVG(Scalable Vector Graphics) 포맷의 아이콘, 일러스트 등을 무료로 다운로드 받을 수 있습니다. 웹 개발자, 디자이너 및 블로거 등에게 유용한 사이트입니다.
출처를 표시해야 하는 라이센스를 가진 아이콘도 있으니 아이콘 상세 페이지에서 꼭 확인 후 사용하시길 바랍니다.

Streamline

Streamline HQ는 고품질의 아이콘, 일러스트레이션, 애니메이션 등을 제공하는 사이트입니다. 다양한 스타일과 테마의 아이콘 세트를 유료 및 무료로 다운로드할 수 있으며, UX/UI 디자인, 웹 및 모바일 애플리케이션 개발에 사용하기 좋습니다. 일부 무료 아이콘 중에는 출처를 표시해야 하는 세트들이 있으니 아이콘 세트 상세 페이지에서 라이센스를 확인 후 사용하시길 바랍니다.

SVG 아이콘 CSS에서 적용하기

SVG 아이콘을 이미지로 사용하거나, SVG를 HTML에 직접 삽입하여 사용할 수도 있습니다. 하지만 워드프레스에서 SVG 파일 업로드가 불가하기 때문에 별도로 플러그인을 사용하거나 테마 파일 수정이 필요합니다. 또 HTML에 직접 삽입하는 것은 더더욱 어렵죠. 그래서 이 글에서는 SVG 코드를 background-image 속성에 인라인으로 넣어 사용하는 방법을 소개하겠습니다.

SVG 코드 준비하기

이 글에서는 아래 코드를 사용한다고 가정하겠습니다. SVG 파일을 크롬 등 브라우저로 열고 페이지 소스 보기를 하면 아래와 같은 코드 형태로 되어 있습니다.

<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="..." fill="currentColor"></path>
</svg>

SVG를 Data URI로 변환하기

SVG를 배경 이미지로 사용하려면 Data URI 형식으로 변환해야 합니다. Data URI는 이미지를 텍스트 형식으로 인코딩하여 CSS에서 사용할 수 있도록 해줍니다.

1. SVG 코드를 Data URI로 변환해 주는 사이트를 이용하여 쉽게 변환할 수 있습니다. 아래 버튼을 누르면 온라인 Data URI 변환 사이트로 이동합니다.

2. Insert SVG 부분에 SVG 코드를 붙여 넣으면 background-image 속성을 자동으로 생성해 줍니다. Copy 버튼을 눌러 복사합니다.
3. 다음 아래와 예시와 같이 작성을 합니다.

.icon {
  width: 50px;
  height: 50px;
  color: red; /* 아이콘 색상을 빨간색으로 변경 */
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

4. 이제 출력을 해줘야 합니다. 아래와 같이 HTML 태그 작성 시 위 CSS 코드에서 작성한 icon 선택자를 넣어 줍니다.

<div class="icon"></div>

위 방법처럼 class를 새로 생성하여 아이콘을 표시하는 방법도 있지만 이미 정해진 class 앞 또는 뒤에 아이콘을 항상 표시할 수도 있습니다.

::before 선택자를 사용하여 h3 요소 앞에 SVG 아이콘을 항상 표시하는 방법을 소개합니다. ::before 선택자는 CSS로 특정 콘텐츠를 요소의 앞에 추가할 수 있게 해줍니다. 아래 h3 요소 앞에 SVG 아이콘을 표시하는 예시를 확인해 보세요!

<style>
  h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle; /* h3 텍스트와 수직으로 맞추기 */
    color: red; /* SVG 색상 변경 */
  }
</style>

<h3>Sample Heading</h3>

이제 h3 요소 앞에 항상 SVG 아이콘이 표시될 것입니다. 아이콘의 색상이나 크기를 변경하려면 CSS 속성을 조정하면 됩니다. 끝!

가변 폰트 CSS 적용 방법 (Variable Fonts)