SVG Icons: Difference between revisions

From Posstack.com Documentations
No edit summary
No edit summary
Line 1: Line 1:
Some websites where you can get free SVG Icons for your shop:
Here are some useful resources you can go to for free SVG icons. We hope this will save you time as you search for the perfect vector icon set for your Shopify pages.


==Bootstrap icons==
==Bootstrap icons==
Website: https://icons.getbootstrap.com/
Website: https://icons.getbootstrap.com/


Free, high quality, open source icon library with over 1,600 icons.
This is a free, high-quality, open-source icon library with over 1,600 icons.


You simply search icons, then copy the HTML code and paste the SVG right into the block setting.


Search icons, then copy HTML code and paste the SVG right into block setting.
For example: https://icons.getbootstrap.com/icons/bag-check/
 
E.g: https://icons.getbootstrap.com/icons/bag-check/


     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">

Revision as of 07:30, 23 November 2022

Here are some useful resources you can go to for free SVG icons. We hope this will save you time as you search for the perfect vector icon set for your Shopify pages.

Bootstrap icons

Website: https://icons.getbootstrap.com/

This is a free, high-quality, open-source icon library with over 1,600 icons.

You simply search icons, then copy the HTML code and paste the SVG right into the block setting.

For example: https://icons.getbootstrap.com/icons/bag-check/

   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
     <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
   </svg>

ICONOIR

Website: https://iconoir.com/

Iconoir is one of the biggest open source icons libraries. Icons available in SVG format, Font, React and React Native libraries, Figma and Framer.