Home SVG Icon

Popular UI SVG Icon

Popular UI All Style (Typography, Elements, Gallery, etc) | Popular UI SVG Icon

MD Abu Sufian

July 19, 2023

---

Popular UI SVG Icon

Table of Content

SVG icons have several advantages, including scalability, SEO friendly, editability and independent resolution. Therefore, the future of SVG looks bright and the trend of SVG usage will continue to grow.

Here are some benefits of using SVG icons:

It won't blur and won't break when grown.
It won't blur and break if the resolution is increased.
Image quality will be maintained.
Can load websites faster.
Great for responsive design, as quality stays sharp on all devices.

How to get SVG icons

You must visit the website Iconer. There you can select different types of SVG icons, which will be coded for use.

Select one of the available icon menus, for example, select the icon menu from Feather Icons.

Click Open in App.

In the Right sidebar set the option value to Stroke Width becomes 1.

Search for the SVG icon according to your needs, then click the SVG icon and the code will be copied automatically. Example like the Download icon code below.

<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox= "0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
   <path d="m7 10 5 5 5-5"></path>
   <path d="M12 15V3"></path>
</svg>Copy

Just take the path part, for example like below.

<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>Copy

How to Install SVG Icons

Follow these steps.

Go to Blogger Dashboard > select Layout.

Find the section titled Popular UI PANEL.

Click the edit button (pencil icon) in Custom SVG Icons (Gadget List).

Widget configuration pop up will appear.

Also Read: How to use the Classic Syntax Highlighter

In the Title column leave default.

In the column Number of items to appear in the list leave blank.

In column Sort leave default.

Also Read: How to use Accordion

In the Text List section, click the ADD NEW ITEM button.

In the Text column, fill in the format like the example below.

<symbol id='Download' viewbox='0 0 24 24'>
   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
   <path d="m7 10 5 5 5-5"></path>
   <path d="M12 15V3"></path>
</symbol>Copy

In the id='Download' section replace the text Download with the name Label.
In the code section path replace with the path code taken from previous step.

If already configured click the SAVE button on the right.

When everything is configured, click the SAVE button below.

If you want to report some bugs, you can write it in the comment section of the Report a bug page and if you want to request a new feature or give feedback, please write it in the comment section of the request and feedback page.

SVG Icon