Search

<p>Vector icons can be an excellent tool for web designers or developers (without a knack for design) to <em>indicate or highlight UI elements and solve responsive issues on retina displays</em> (vectors are a mathematical representation of a design, allowing for an unlimited and loss-less ability to scale for any resolution/size). Below are some resources that I’ve found over the years — while most of these resources are free, be sure to check (and double check) the required license for each.</p><div class="lwptoc lwptoc-autoWidth lwptoc-light lwptoc-notInherit" data-smooth-scroll="1" data-smooth-scroll-offset="24"><div class="lwptoc_i">    <div class="lwptoc_header" style="font-size:175%;">
        <b class="lwptoc_title">Contents</b>                    <span class="lwptoc_toggle">
                <a href="#" class="lwptoc_toggle_label" data-label="show">hide</a>
            </span>
            </div>
<div class="lwptoc_items lwptoc_items-visible" style="font-size:125%;">
    <div class="lwptoc_itemWrap"><div class="lwptoc_item">    <a href="#1_Smashing_Magazine">
                    <span class="lwptoc_item_number">1</span>
                <span class="lwptoc_item_label">1. Smashing Magazine</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#2_Font_Awesome_Icons">
                    <span class="lwptoc_item_number">2</span>
                <span class="lwptoc_item_label">2. Font Awesome Icons</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#3_Glyphicons">
                    <span class="lwptoc_item_number">3</span>
                <span class="lwptoc_item_label">3. Glyphicons</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#4_Awwwardscom_Collection">
                    <span class="lwptoc_item_number">4</span>
                <span class="lwptoc_item_label">4. Awwwards.com Collection</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#5_FLATICON">
                    <span class="lwptoc_item_number">5</span>
                <span class="lwptoc_item_label">5. FLATICON</span>
    </a>
    <div class="lwptoc_itemWrap"><div class="lwptoc_item">    <a href="#Not_sure_what_a_license_means">
                    <span class="lwptoc_item_number">5.1</span>
                <span class="lwptoc_item_label">Not sure what a license means?</span>
    </a>
    </div></div></div></div></div>
</div></div>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-319" src="http://brytdesigns.com/wp-content/uploads/2016/04/smashing-icons.jpg" alt="Smashing Magazine Icon Freebie" width="710" height="350" srcset="https://admin.brytdesigns.com/wp-content/uploads/2016/04/smashing-icons.jpg 710w, https://admin.brytdesigns.com/wp-content/uploads/2016/04/smashing-icons-300x148.jpg 300w" sizes="(max-width: 710px) 100vw, 710px"></p>
<h2><span id="1_Smashing_Magazine">1. Smashing Magazine</span></h2>
<p>Not only one of my favorite resources for web development and design reading, tips, and ideas — but a great resource for free icon sets! Licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a> meaning that they’re absolutely <strong>FREE Icons</strong> to use and modify.</p>
<p>Link: <a href="https://www.smashingmagazine.com/2015/07/freebie-smashicons-icon-set/" target="_blank">https://www.smashingmagazine.com/2015/07/freebie-smashicons-icon-set/</a></p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-317" src="http://brytdesigns.com/wp-content/uploads/2016/04/fontawesome-icons.jpg" alt="Fontawesome Icons" width="710" height="350" srcset="https://admin.brytdesigns.com/wp-content/uploads/2016/04/fontawesome-icons.jpg 710w, https://admin.brytdesigns.com/wp-content/uploads/2016/04/fontawesome-icons-300x148.jpg 300w" sizes="(max-width: 710px) 100vw, 710px"></p>
<h2><span id="2_Font_Awesome_Icons">2. Font Awesome Icons</span></h2>
<p>Another great resource for <strong>svg web icons</strong> — include this in your next web project for fully rasterized, crisp, svg web icons. <a href="https://fortawesome.github.io/Font-Awesome/get-started/" target="_blank">Click here</a> to learn how to include these icons in your next web project (they’ve got a great CDN I recommend you use, especially if you’re on a shared host).</p>
<p>Link: <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">https://fortawesome.github.io/Font-Awesome/</a></p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-318" src="http://brytdesigns.com/wp-content/uploads/2016/04/glyphicons-icons.jpg" alt="Glyphicons Icons" width="710" height="350" srcset="https://admin.brytdesigns.com/wp-content/uploads/2016/04/glyphicons-icons.jpg 710w, https://admin.brytdesigns.com/wp-content/uploads/2016/04/glyphicons-icons-300x148.jpg 300w" sizes="(max-width: 710px) 100vw, 710px"></p>
<h2><span id="3_Glyphicons">3. Glyphicons</span></h2>
<p>If you’re familiar with <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>, you’re familiar with Glyphicons. Glyphicons is a set of <strong>svg web icons</strong> to use in your next web project (via icon classes) — this can save a tremendous amount of time when it comes to indicators, helpers, etc.</p>
<p>Link: <a href="http://glyphicons.com/" target="_blank">http://glyphicons.com/</a></p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-315" src="http://brytdesigns.com/wp-content/uploads/2016/04/awwwards-icons.jpg" alt="Awwwards Icon Freebie Set" width="710" height="350" srcset="https://admin.brytdesigns.com/wp-content/uploads/2016/04/awwwards-icons.jpg 710w, https://admin.brytdesigns.com/wp-content/uploads/2016/04/awwwards-icons-300x148.jpg 300w" sizes="(max-width: 710px) 100vw, 710px"></p>
<div class="mceTemp"></div>
<h2><span id="4_Awwwardscom_Collection">4. Awwwards.com Collection</span></h2>
<p>A compilation of both <strong>wireframe and color-rich svg web icons</strong> brought to you by <a href="http://www.awwwards.com/" target="_blank">awwwards.com</a>!</p>
<p>Link: <a href="http://www.awwwards.com/great-collection-of-free-vector-icons-and-pictograms-for-interfaces-and-responsive-web-design.html" target="_blank">http://www.awwwards.com/great-collection-of-free-vector-icons-and-pictograms-for-interfaces-and-responsive-web-design.html</a></p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-316" src="http://brytdesigns.com/wp-content/uploads/2016/04/flaticons-icons.jpg" alt="Flaticons Icons" width="710" height="350" srcset="https://admin.brytdesigns.com/wp-content/uploads/2016/04/flaticons-icons.jpg 710w, https://admin.brytdesigns.com/wp-content/uploads/2016/04/flaticons-icons-300x148.jpg 300w" sizes="(max-width: 710px) 100vw, 710px"></p>
<h2><span id="5_FLATICON">5. FLATICON</span></h2>
<p>This may be one of the best compilations of flat icon designs I’ve found. The only issue with this resource is that not all of the icons will be free for commercial and personal use — some may require author attribution or license purchase (be sure to check the license requriements).</p>
<p>Link: <a href="http://www.flaticon.com/" target="_blank">http://www.flaticon.com/</a></p>
<h3><span id="Not_sure_what_a_license_means">Not sure what a license means?</span></h3>
<p>Be sure to check out <a href="http://brytdesigns.com/blog/free-stock-photo-resources/">a previous article of ours explaining the different types of licenses and what to look out for</a>.</p>


Tag:"Icons"

Tag:
"Icons"