IT분야 기술 무료 아이콘의 보물창고, 테크아이콘(techicons.dev)

IT 분야 기술 아이콘의 보물창고

아이콘을 무료로 제공하는 사이트는 많지만 IT 분야의 아이콘을 전문적으로 제공하는 곳은 드문데요. 제가 IT 분야 블로그 내용의 글을 작성하다 보니 IT 분야의 아이콘이 많이 필요할 때가 있습니다. 

테크아이콘(techicons.dev)

오늘 소개해드릴 테크아이콘(techicons.dev) 서비스는 IT 분야 회사, 오픈소스, 프레임워크, 개발도구 등의 특화된 아이콘을 제공하는 사이트입니다. IT분야 블로그를 작성할 때 이런 아이콘들이 얼마나 유용한지 알게 돼서 기뻤고 이 사이트를 좀 더 자세히 알아보고 여러분과 공유하도록 하겠습니다.  

 

주요 특징

테크아이콘(techicons.dev)은 다음과 같은 특징을 가지고 있습니다.

• SVG와 PNG로 전체 및 각 파일별 다운로드가 가능합니다. SVG는 확대해도 깨지지 않는 벡터 이미지이고, PNG는 투명 배경을 지원하는 비트맵 이미지입니다. 따라서 원하는 크기와 배경에 맞게 사용할 수 있습니다.  

PNG와 SVG 파일 포맷 제공

• 무료로 사용할 수 있습니다. 이 사이트는 IT 종사자들에게 유용한 리소스를 제공하고자 만들어진 사이트로, 아이콘의 저작권은 각각의 소유자에게 있습니다. 단, 상업적 용도로 사용할 때는 출처를 밝혀야 합니다.  

 

• 현재 426개의 아이콘을 보유하고 있습니다. 이 사이트는 계속해서 새로운 아이콘을 추가하고 있으며, 요청이나 건의사항이 있으면 "Request icon(아이콘 요청)" 기능을 통해 요청을 할 수도 있습니다.  

 

사용 방법

techicons.dev의 사용 방법은 매우 간단합니다. 다음과 같은 순서로 진행하시면 됩니다.

 

1. 크롬(Chrome) 브라우저에서 테크아이콘(TECH ICONS) https://techicons.dev/ 로 이동합니다. 
2. 원하는 아이콘을 찾습니다. 사이트의 상단에 있는 검색창에 검색어를 입력하거나, 화면의 나오는 426개 아이콘을 찾을 수 있습니다. 

검색바에서 쉽게 키워드로 아이콘을 찾을 수 있습니다.

 

3. 원하는 아이콘을 아이콘을 클릭하면 상세 페이지로 이동하며, 여기서 SVG나 PNG로 각 파일별로 다운로드할 수 있습니다.  예시로 google로 검색해서 구글 아이콘을 선택합니다. 

google 키워드로 검색하여 아이콘 상세 페이지로 이동

 

4. 더 쉬운 방법은 "Copy PNG" 버튼을 클릭해서 클립보드로 복사하여 그림판에 "붙여 넣기(Ccontrol + V)"로 사용하면 됩니다. 

5. SVG 이미지 코드 삽입 방법: "Copy SVG" 버튼을 클릭하면 Html 코드로 복사되기 때문에 그림판에서 사용할 수 있고 웹페이지 소스에 코드를 삽입하거나 티스토리 경우에는 "HTML 블럭" 기능으로 사용할 수 있습니다. 

• 티스토리 > 쓰기 모드 > 우측 상단의 • • • 클릭 > HTML 블럭 메뉴를 선택하여 코드를 입력 아래 이미지는 SVG 이미지 삽입 예시입니다. 

구글의 SVG 이미지 삽입 예시

• Copy 한 SVG코드를 그대로 사용하면 사이즈가 원본 그대로 크게 나오게 때문에 사이즈 조절을 해줘야 합니다. 위 예시는 width="200" height="200"를 추가로 넣어줬습니다. 구글 SVG 이미지 예시 소스코드를 공개해 드립니다. 

<center>
    <div style="text-align: center;">
    <!-- "소스 코드 복사" 코드를 아래 넣습니다. -->

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M44.59 4.21a63.28 63.28 0 004.33 120.9 67.6 67.6 0 0032.36.35 57.13 57.13 0 0025.9-13.46 57.44 57.44 0 0016-26.26 74.33 74.33 0 001.61-33.58H65.27v24.69h34.47a29.72 29.72 0 01-12.66 19.52 36.16 36.16 0 01-13.93 5.5 41.29 41.29 0 01-15.1 0A37.16 37.16 0 0144 95.74a39.3 39.3 0 01-14.5-19.42 38.31 38.31 0 010-24.63 39.25 39.25 0 019.18-14.91A37.17 37.17 0 0176.13 27a34.28 34.28 0 0113.64 8q5.83-5.8 11.64-11.63c2-2.09 4.18-4.08 6.15-6.22A61.22 61.22 0 0087.2 4.59a64 64 0 00-42.61-.38z"/><path fill="#e33629" d="M44.59 4.21a64 64 0 0142.61.37 61.22 61.22 0 0120.35 12.62c-2 2.14-4.11 4.14-6.15 6.22Q95.58 29.23 89.77 35a34.28 34.28 0 00-13.64-8 37.17 37.17 0 00-37.46 9.74 39.25 39.25 0 00-9.18 14.91L8.76 35.6A63.53 63.53 0 0144.59 4.21z"/><path fill="#f8bd00" d="M3.26 51.5a62.93 62.93 0 015.5-15.9l20.73 16.09a38.31 38.31 0 000 24.63q-10.36 8-20.73 16.08a63.33 63.33 0 01-5.5-40.9z"/><path fill="#587dbd" d="M65.27 52.15h59.52a74.33 74.33 0 01-1.61 33.58 57.44 57.44 0 01-16 26.26c-6.69-5.22-13.41-10.4-20.1-15.62a29.72 29.72 0 0012.66-19.54H65.27c-.01-8.22 0-16.45 0-24.68z"/><path fill="#319f43" d="M8.75 92.4q10.37-8 20.73-16.08A39.3 39.3 0 0044 95.74a37.16 37.16 0 0014.08 6.08 41.29 41.29 0 0015.1 0 36.16 36.16 0 0013.93-5.5c6.69 5.22 13.41 10.4 20.1 15.62a57.13 57.13 0 01-25.9 13.47 67.6 67.6 0 01-32.36-.35 63 63 0 01-23-11.59A63.73 63.73 0 018.75 92.4z"/></svg>

    <!--  "소스 코드 복사" 끝 -->

    <!--  설명 시작 -->
        <p style="margin-top: 10px; font-size: 16px;">구글의 SVG 이미지 삽입 예시</p>
    <!--  설명 끝 -->
    </div>
</center>

 

6. 또는 "Download PNG", "Download SVG" 버튼을 클릭하여 아이콘을 다운 받을 수 있습니다. 

 

원하는 아이콘은 다양한 형태로 문서에 삽입, 그림 이미지로 사용, 웹사이트에 적용 등으로 사용하시면 됩니다. 

 

techicons의 장점

테크아이콘(techicons.dev)의 장점은 다음과 같습니다.

테크아이콘(techicons.dev)을 개발하는 디비콘(Devicon)오픈소스 프로젝트

1. 다양한 IT분야 기술 아이콘을 한곳에서 볼 수 있습니다. 기술 회사, 오픈소스, 프레임워크, 개발도구 등의 아이콘을 모아놓은 사이트는 드물기 때문에, 이 사이트는 기술 아이콘을 찾는데 많은 도움이 됩니다. 

 

2. 고품질의 아이콘을 사용할 수 있습니다. 이 사이트의 아이콘은 SVG와 PNG로 제공되며, 각각의 아이콘은 세련되고 깔끔한 디자인을 가지고 있습니다. 또한, 아이콘의 크기와 배경을 자유롭게 조절할 수 있어서 원하는 곳에 적용하기 쉽습니다.  

3. 무료로 사용할 수 있습니다. 이 사이트는 개발자들에게 유용한 리소스를 제공하고자 만든 사이트로, 아무런 비용을 지불하지 않고 사용할 수 있습니다. 단, 상업적 용도로 사용할 때는 출처를 밝혀야 합니다.  

마치며

제가 IT 분야 블로그를 운영하고 있는 상황에서 테크아이콘(techicons.dev) 사이트를 이용해 보고 만족스러웠습니다. 이 서비스는 IT분야 기술 아이콘에 한정되어 있어 일반적인 아이콘이 없어 다양성에서는 부족하지만 IT 분야만큼은 잘 정리된 곳인 것 같습니다.

 

그리고 쉽고 빠르게 원하는 아이콘을 찾고 다운로드할 수 있는 장점과 아이콘의 디자인과 품질이 매우 좋아서 프로젝트나 포트폴리오에 잘 어울립니다. IT분야 종사자분들에게 꼭 추천하고 싶은 사이트입니다. 

 

함께 보면 도움이 되는 콘텐츠 보기

▶ 갤럭시 S 시리즈 폰에서 한국어 제미나이(Gemini) 앱 설치와 사용방법

갤럭시 S 시리즈 폰에서 한국어 제미나이(Gemini) 앱 설치와 사용방법

▶ 갤럭시S 시리즈 One UI 6.1에 대한 모든 것, 갤럭시 기기 목록

갤럭시S 시리즈 One UI 6.1에 대한 모든 것, 갤럭시 기기 목록

▶ 구글 AI 챗봇 '바드(Bard)'가 '제미나이(Gemini)' 브랜드로 바뀝니다. 사용방법, 모바일 앱 출시

구글 AI 챗봇 '바드(Bard)'가 '제미나이(Gemini)' 브랜드로 바뀝니다. 사용방법, 모바일 앱 출시

※ 포스팅이 도움이 되셨다면 💓공감, 댓글, 응원하기👍, 광고 부탁 드립니다. ~ 🎉👍🙏