아임웹 SVG 아이콘 스타일 변경 (코드)

아임웹 SVG 아이콘 스타일 변경 (코드)

1. 시작하며

홈페이지를 제작할 때 아이콘은 디자인의 완성도를 높여주는 요소입니다.
특히 SVG 아이콘은 선명한 화질과 가벼운 용량 덕분에 많은 디자이너들이 선호하는 포맷입니다!

이번 글에서는 SVG 아이콘을 무료로 제공하는 사이트 소개와 함께, 아임웹에서 SVG 아이콘의 스타일(크기, 색상)을 변경하는 방법을 자세히 안내해 드리겠습니다.

효과적인 아이콘 스타일링은 브랜드의 개성을 표현하고, 홈페이지 전체의 디자인 통일성을 유지하는 데 큰 역할을 합니다.
아래 내용을 참고하셔서 웹사이트에 알맞는 SVG 아이콘을 적용해 보시기 바랍니다!






2. SVG 아이콘 무료 사이트 소개 및 코드 확인

2-1. Google Fonts

Google Fonts에서는 다양한 SVG 아이콘을 무료로 제공합니다.


Google Fonts 사이트 바로가기

[SVG 코드 확인 방법]

  1. 좌측 패널에서 아이콘 스타일을 설정한 뒤, 우측 패널에서 SVG 다운로드 버튼 클릭
  2. Google Fonts SVG 아이콘 다운로드
    Google Fonts SVG 아이콘 다운로드

    💡
    아이콘 스타일을 코드로 변경할 것이기 때문에 다운로드 시 스타일은 기본값으로 설정해도 괜찮습니다!
  3. 다운로드한 SVG 파일을 우클릭한 후, 메모장으로 열기
  4. SVG 파일 메모장으로 열기
    SVG 파일 메모장으로 열기
  5. SVG 코드 확인
SVG 코드 확인
SVG 코드 확인

2-2. Font Awesome

Font Awesome에서도 다양한 SVG 아이콘을 무료로 제공하고 있습니다.


Font Awesome 사이트 바로가기

[SVG 코드 확인 방법]

  1. 사이트 접속 후 Free 탭으로 이동
  2. Free 탭으로 이동
    Free 탭으로 이동
  3. 원하는 아이콘을 선택한 후, SVG 탭에서 코드 복사 (노란색 박스 클릭)
  4. SVG 코드 복사
    SVG 코드 복사
  5. 복사한 SVG 코드를 메모장에 붙여넣기
복사한 SVG 코드 확인
복사한 SVG 코드 확인





3. 아임웹에서 SVG 아이콘 적용 및 스타일 변경

3-1. SVG 코드 준비하기

Google Fonts에서 다운로드한 SVG 코드에서 xmlnsviewBox 속성은 유지하고, height, width, fill 속성은 삭제합니다.

수정 전 :

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="black">
  <path d="M10 20h28v8H10z"/>
</svg>
Google Fonts SVG 코드 - 수정 전
Google Fonts SVG 코드 - 수정 전

수정 후 :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <path d="M10 20h28v8H10z"/>
</svg>

Google Fonts SVG 코드 - 수정 후
Google Fonts SVG 코드 - 수정 후

Font Awesome에서 복사한 SVG 코드는 별도의 수정 없이 그대로 사용할 수 있습니다.

3-2. 스타일 적용하기

아래의 코드에서 SVG 코드를 삽입한 후, SVG 아이콘의 크기와 색상을 변경합니다.

<style>
  .icon-wrapper svg {
    width: 50px;      /* 아이콘 크기 설정 */
    height: 50px;
    fill: red;        /* 아이콘 색상 변경 */
  }
</style>

<div class="icon-wrapper">
  svg 코드 삽입
</div>

3-3. 아임웹에 코드 삽입하기

아임웹 디자인 모드에서 코드 위젯을 추가하고, 위에서 수정한 코드를 붙여넣으세요.
미리보기 버튼을 클릭하여 SVG 아이콘이 원하는 스타일로 표시되는지 확인하시기 바랍니다.

코드 위젯에 코드 붙여넣기
코드 위젯에 코드 붙여넣기

3-4. 미리보기로 확인하기

미리보기 버튼을 클릭하여 SVG 아이콘이 원하는 스타일로 표시되는지 확인하시기 바랍니다.

SVG 아이콘 스타일 적용 전
SVG 아이콘 스타일 적용 전
SVG 아이콘 스타일 적용 후
SVG 아이콘 스타일 적용 후





4. SVG 삽입 시 주의 사항

  • 코드 위젯 사용: SVG 파일은 텍스트 위젯이나 이미지 위젯 대신 코드 위젯을 사용해야 올바르게 작동합니다.
  • 파일 크기 관리: 복잡한 SVG는 파일 용량이 커질 수 있으므로, 필요 시 최적화 작업을 진행하세요.






5. 마무리


Google Fonts와 Font Awesome에서 SVG 아이콘을 다운로드하고, 아임웹에서 스타일을 자유롭게 변경하는 방법을 알아보았습니다.


SVG 아이콘은 단순한 아이콘뿐 아니라 로고, 그래픽 요소로도 활용할 수 있으며, CSS를 통해 크기와 색상을 유연하게 조절할 수 있습니다.
아임웹 홈페이지를 더욱 세련되게 꾸미기 위해 이번 방법을 활용해 보세요!




[함께 읽으면 좋은 글]


* 아임웹 SVG 파일 삽입하기

아임웹 SVG 파일 삽입하기 | 아임웹 홈페이지 지식 저장소, 웹카이브
아임웹에서 SVG 파일을 활용하는 방법과 그 장점, SVG와 PNG의 차이점 및 삽입 시 주의사항을 소개합니다. 홈페이지 디자인의 퀄리티를 높이고 빠른 로딩 속도를 구현하는 방법을 확인해 보세요.

게시글 더보기

아임웹 동영상 위젯 모서리 둥글게 (코드)

아임웹 동영상 위젯 모서리 둥글게 (코드)

1. 시작하며 아임웹으로 홈페이지를 만들다 보면 다양한 위젯을 배치하게 됩니다. 그중에서도 동영상 위젯은 시각적인 정보 전달에 효과적인 요소인데요, 이때 다른 요소들과 조화롭게 보이기 위해서는 디자인 디테일이 매우 중요합니다. 예를 들어 이미지나 버튼은 둥글게 처리했는데, 동영상만 각져 있다면 화면의 전체적인 느낌이 어색해질 수 있습니다. 그래서 이번 글에서는 아임웹 동영상 위젯의 모서리를

아임웹 텍스트가 떠오르는 애니메이션 (코드)

아임웹 텍스트가 떠오르는 애니메이션 (코드)

1. 시작하며 홈페이지를 방문한 첫 순간, 사용자의 이목을 사로잡는 요소 중 하나는 바로 텍스트 애니메이션입니다. 정적인 텍스트보다 살짝 움직이는 텍스트는 훨씬 더 주목받을 수 있으며, 브랜드나 메시지를 자연스럽게 강조하는 데 유용합니다. 이번 글에서는 아임웹을 통해 텍스트 한 줄씩 부드럽게 떠오르는 애니메이션 효과를 구현하는 방법을 안내드립니다. 2. 텍스트가 위로 떠오르는 부드러운

아임웹 라이브 뱃지 만들기 (코드)

아임웹 라이브 뱃지 만들기 (코드)

1. 홈페이지에 ‘LIVE’ 뱃지가 필요한 이유 홈페이지에서 후기나 리뷰를 실시간으로 보여줄 때, 시각적으로 주목받을 수 있는 방법은 매우 중요합니다. 단순한 텍스트보다 시각적으로 강조된 뱃지를 활용하면 사용자의 집중도를 높이고, 정보의 긴급성이나 신뢰도를 효과적으로 전달할 수 있습니다. 실시간 후기, 라이브 상담, 긴급 공지, 한정 이벤트와 같이 현재 진행 중인 정보를 보여줄 때

아임웹 입력폼 개인정보수집동의 숨기기

아임웹 입력폼 개인정보수집동의 숨기기 (코드)

1. 시작하며 아임웹에서 입력폼을 통해 고객의 개인정보를 수집하거나 제3자에게 제공하는 경우, 반드시 관련 동의 항목을 명시해야 합니다. 하지만 입력폼 하단에 긴 동의 문구가 노출되면 폼이 길어지고 가독성도 떨어지기 쉬운데요, 이번 글에서는 입력폼 디자인을 해치지 않으면서도 개인정보 동의를 받을 수 있는 방법을 소개해 드리겠습니다. 2. 아임웹 입력폼 동의 항목 기본 설정