웹솔루션개발 25년 노하우! 해피CGI의 모든것

900개가 넘는 백터 아이콘을 무료제공하는 AXICON 입니다. https://github.com/axisj/axicon/releases 사이트를 통해 다운로드가 가능하며, http://axisj.com/axicon/ 페이지에서 이용방법을 확인을 할 수 있습니다. 제공되는 아이콘이 많지만 사이트에서 제공하는 아이콘탐색기를 통해 쉽게 아이콘을 검색 할 수 있습니다. http://axicon.axisj.com/

원하시는 SVG 아이콘을 검색하여 찾을 수 있습니다만 항목이 크게 많진 않아 한 화면에서 원하는 아이콘을 찾아 보시는게 나을 것 같습니다.^^ 아이콘을 다운로드도 할 수 있으나 SVG 특성상 copy 만 하시고 적용할 사이트내에 javascript 를 적용하여 손쉽게 아이콘 소스를 대입하는 방법으로 이용하시길 권장합니다. https://primer.style/octicons/packages/javascript 위 링크를 통해 스크립트 소스를 대입하는 방법을 확인할 수 있으며, https://github.com/primer/octicons 위 링크에서 관련 소스를 정리한 폴더를 다운받아 적용해보시기 바랍니다.

Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다. 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다. 홈페이지에서 소스를 다운 받아 사용해보시거나 데모사이트에서 구현된 아이콘 hover효과를 확인하시고 참고 하실 수 있습니다.

퀄리티가 좋은 아이콘을 무료로 사용할 수 있는 사이트 flatiocn입니다. 왕관아이콘이 붙어있는 아이콘은 premium 아이콘으로 결제가 필요한 아이콘이지만 무료로 사용할 수 있는 아이콘도 퀄리티가 좋아서 굳이 결제가 필요할까 라는 생각이 듭니다. 원하는 단어로 검색이 가능하고, premium 아이콘은 제외하고 검색도 가능하므로 검색기능을 이용하면 한층 더 편리하게 원하는 아이콘을 찾을 수 있을듯 합니다. ^^ ​ ​ ​

svg 아이콘을 굵기, 크기, 색상별로 설정하여 원하는 아이콘을 검색 및 다운로드 할 수 있는 유용한 아이콘 다운로드 사이트입니다. 좌측 검색영역에서 원하는 SVG 아이콘을 검색 및 굵기, 사이즈, 컬러등을 조절하여 원하는 아이콘을 사전에 검색 및 설정하여 보여줍니다. 또한 dark mode 를 이용하여 반전된 배경화면에서 보여지는 아이콘종류도 확인할 수 있어 상황에 맞는 아이콘을 대부분 제작할 수 있습니다. 원하시는 아이콘을 설정후 선택 및 다운로드하시면 압축파일로 해당 아이콘을 받아보실 수 있습니다.

168개의 무료 벡터 아이콘 모음입니다. Ai, EPS, SVG 파일 로 다운로드 가능합니다. 개인 또는 상업 프로젝트로 이용이 가능하며, 회색과 흰색으로 제공되어 사용이 편합니다.

​ 작업중인 사이트의 태그 안에 아래의 코드를 삽입합니다. 아래 사이트에서 원하시는 아이콘을 선택합니다. https://material.io/tools/icons/?style=baseline 아이콘을 선택하고 좌측의 소스를 복사하여 사용할 수 있습니다. /* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light backgr..

iconmonstr는 직관적이고 심플한 아이콘들을 무료로 제공하는 사이트 입니다. 원하는 아이콘을 svg, eps, psd, png 파일로 다운 받을 수 있습니다. svg 파일의 경우, "Embed"로 html소스에 바로 적용할 수 있는 코드 복사가 가능합니다. png 이미지로 다운 받으실 경우, 사이트 내에서 사이즈조정 및 색상변경을 하여 다운로드가 가능하므로 이미지 편집프로그램으로 편집 없이 사용하실 수도 있습니다. iconmonstr의 아이콘은 무료로 이용할 수 있으나 재배포, 재판매는 금지하고 있으며, 자세한 라이센스는 [링크]에서 확인하실 수 있습니다.

더노운프로젝트는 전세계의 그래픽디자이너들이 픽토그램, 아이콘, 심볼 등을 업로드하는 사이트입니다. 사용자에게 무료로 제공하는 사이트이지만 아이콘을 판매하시면 문제가 됩니다. 더노운프로젝트는 해외사이트이므로 검색할때 영어로 해야하고 회원가입을 해야하는 번거로움이 있지만 검색시 방대한 자료가 나온다는 장점이 있습니다. 원하는 이미지를 선택하셔서 'Get this icon' 버튼을 클릭 후, 'Basic Download'에 체크하셔서 'Continue' 버튼을 클릭합니다. 마지막으로 사용하실 계획에 체크를 하시고 'Choose Use' 버튼을 클릭하신 후, PNG/SVG 중 선택하여 이미지를 다운로드 받으시면 됩니다.

폰트어썸이 5 버전으로 업데이트 되었습니다. 기존 4 버전보다 아이콘은 많아지고 사용법은 단순해졌습니다. https://fontawesome.com/start 위의 링크에 방문하여 위의 css 를 참조하고 https://fontawesome.com/icons?d=gallery 위의 링크에서 원하는 아이콘을 찾아 위와 같이 복사해서 넣어 쓰시면 됩니다.