Here are some icons that we recommend for you to use in this template, some of the icons below are very harmonious and match in terms of style and line thickness with the icons used in this template.
Most of the icon sets below are from iconfinder.com with a Free for commercial user license, which means that they can be used for free even for commercial use. But we still recommend to check the license of the icon below, maybe the author changes the license to use.
How do I convert SVG to HTML?
There are two methods you can apply to get the HTML code from the SVG icon, the easiest way you can do is open the SVG file that you downloaded earlier with Notepad and copy all the code between the tags
[<svg> ... </svg>]
The second way is by manual, follow the steps below:
- Download the svg file you want
- Right click on the downloaded svg file then select Open with> Browser of your choice , we recommend you to use Chrome or Firefox
- After the SVG file is opened in the browser, Right click> Inspect element or in Chrome press ctrl + shift + i
- Then the HTML code will appear from the svg icon that was downloaded earlier, copy all the html code and paste it in the part you want in this template
<!-- Bookmark --><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(4.000000, 2.000000)'><path d='M11.5258621,0 L4.62931034,0 C1.78448276,0 0,1.9858782 0,5.17210944 L0,18.3230362 C0,19.2491977 0.733326703,20 1.63793103,20 C1.91180194,20 2.18135035,19.9300723 2.42241379,19.7969991 L8.03448276,16.6813769 L14.5689655,19.8146514 C14.7461483,19.8908228 14.9456376,19.8917645 15.1234989,19.8172691 C15.3013603,19.7427737 15.4430062,19.598951 15.5172414,19.4174757 C15.6267768,19.0830842 15.4940188,18.7157283 15.1982759,18.5348632 L8.70689655,15.4280671 C8.28279792,15.1893907 7.76892621,15.1893907 7.34482759,15.4280671 L1.72413793,18.5348632 C1.65968122,18.5709713 1.58169809,18.5709713 1.51724138,18.5348632 C1.45595472,18.494491 1.41993354,18.4240845 1.42241379,18.3495146 L1.42241379,5.17210944 C1.43103448,2.81553398 2.5862069,1.47396293 4.65517241,1.47396293 L11.5517241,1.47396293 C14.2068966,1.47396293 14.5948276,3.68049426 14.5948276,5.00441306 L14.5948276,5.60458959 L7.12931034,5.60458959 C6.93950091,5.61148655 6.76015756,5.69536443 6.63079621,5.83774183 C6.50143487,5.98011924 6.43267077,6.16931284 6.43965517,6.36363636 C6.44874481,6.74967865 6.75225353,7.06042014 7.12931034,7.06972639 L14.5689655,7.06972639 L14.5689655,14.7925861 C14.5689655,15.1971724 14.8893135,15.5251545 15.2844828,15.5251545 C15.6763098,15.5251836 15.9952792,15.2025475 16,14.8014122 L16,14.8014122 L16,5.00441306 C16,1.9152692 14.2931034,0 11.5258621,0 Z'></path></g></svg>
<!-- Notification --><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z'/></g></svg>
Settings Icon -
<!-- Setting --><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.000000)'><path d='M0.873095197,5.16335138 C1.07736478,5.12378632 1.28935874,5.16536248 1.46214576,5.27887571 C1.80346964,5.50552363 1.90243476,5.95394091 1.68701228,6.29776021 L1.68701228,6.29776021 L1.63049727,6.40886656 C1.41692137,6.89799239 1.60769048,7.47656916 2.09177201,7.74703557 C2.4834486,7.98141148 2.80584873,8.31137851 3.02721671,8.70443566 C3.71653222,9.94093426 3.28873846,11.4881571 2.05579336,12.2178305 C1.5344748,12.509102 1.35332921,13.1577086 1.65103364,13.6671058 L1.65103364,13.6671058 L2.27166522,14.7123408 C2.41288109,14.9614196 2.65203322,15.1434682 2.93385106,15.2164131 C3.2156689,15.2893581 3.51576316,15.2468866 3.76477889,15.0988142 C4.16629362,14.8713997 4.62284123,14.7531186 5.086994,14.7562582 C6.57727817,14.7562582 7.7853922,15.9360086 7.7853922,17.3913043 C7.79033116,17.9796916 8.28018723,18.454126 8.88274079,18.4541063 L8.88274079,18.4541063 L8.87374613,18.4716733 C9.15331914,18.4716732 9.41165527,18.617322 9.55144177,18.8537549 C9.69122828,19.0901879 9.69122828,19.3814853 9.55144177,19.6179183 C9.41165527,19.8543513 9.15331914,20 8.87374613,20 C7.38346196,20 6.17534794,18.8202497 6.17534794,17.3649539 C6.17777146,17.1797208 6.12798477,16.9974041 6.03143337,16.8379447 C5.72964011,16.3277527 5.06266326,16.1511907 4.5383197,16.4426877 L4.5383197,16.4426877 L4.37846769,16.5211696 C3.14151143,17.0796422 1.65653771,16.647903 0.940455444,15.4940711 L0.940455444,15.4940711 L0.328818521,14.4488362 C-0.360496985,13.2123376 0.0672967775,11.6651148 1.30024187,10.9354414 C1.46365758,10.8415595 1.59986794,10.708547 1.69600694,10.5489679 C1.8763988,10.3034349 1.94122763,9.99452277 1.87427955,9.69949129 C1.80733148,9.40445982 1.61493722,9.15120776 1.34521517,9.00307422 L1.34521517,9.00307422 L1.1953131,8.90768859 C0.0785600264,8.14500505 -0.286802202,6.67465723 0.373791824,5.4896794 L0.373791824,5.4896794 L0.450399681,5.39452047 C0.561991749,5.27649703 0.709679528,5.19500342 0.873095197,5.16335138 Z M17.001622,7.70191857 C17.3561623,7.5776619 17.7596901,7.71242785 17.9583534,8.03689065 C18.1782389,8.39845653 18.057649,8.86556614 17.6885136,9.0821256 C17.5250979,9.17600748 17.3888875,9.30901995 17.2927485,9.46859903 C17.1461723,9.71295723 17.1055255,10.0043354 17.1798277,10.2780759 C17.2541299,10.5518165 17.4372357,10.7852791 17.6885136,10.9266579 C18.9613109,11.6716815 19.3792149,13.2805084 18.6239583,14.5278876 L18.6239583,14.5278876 L18.0123214,15.5731225 L17.9146425,15.7195053 C17.1336224,16.8100396 15.6279243,17.166824 14.4144571,16.5217391 C14.0779771,16.3233633 13.6576674,16.3192826 13.3172148,16.5110862 C12.9767623,16.7028897 12.7699918,17.0602538 12.7774289,17.4440053 C12.7343665,17.8367986 12.3949315,18.1346728 11.990396,18.1346728 C11.5858606,18.1346728 11.2464256,17.8367986 11.2033632,17.4440053 C11.2226877,16.5230894 11.7330478,15.6788723 12.5494071,15.217434 C13.3657664,14.7559956 14.3696134,14.7443234 15.1969926,15.1866491 C15.4455875,15.3326398 15.7442164,15.3738466 16.0245013,15.3008344 C16.3042857,15.2242105 16.542826,15.0447838 16.6901062,14.8001757 L16.6901062,14.8001757 L17.3017432,13.7549407 C17.4479092,13.5119249 17.4883234,13.2218682 17.4139597,12.9495514 C17.339596,12.6772345 17.1566491,12.4453424 16.9059781,12.3056653 C16.4844845,12.0548529 16.1445142,11.6924066 15.9255601,11.2604304 C15.2362446,10.0239318 15.6640383,8.47670896 16.8969834,7.74703557 L16.8969834,7.74703557 Z M9.49437772,6.70178889 C10.3905098,6.69946703 11.2507575,7.04546173 11.885264,7.6634236 C12.5197705,8.28138546 12.8763822,9.12051219 12.8763822,9.99560826 L12.8763822,9.99560826 L12.8707845,10.1950507 C12.7967374,11.4511365 11.9951527,12.5648103 10.7948548,13.0530599 C9.53138337,13.5670069 8.07525531,13.2866234 7.10614636,12.3427838 C6.13703741,11.3989442 5.84603609,9.97775434 6.36897286,8.74258193 C6.89190962,7.50740952 8.125672,6.70178889 9.49437772,6.70178889 Z M9.49437772,8.24769433 C8.50085494,8.24769433 7.69544559,9.03419455 7.69544559,10.0043917 C7.69544559,10.9745889 8.50085494,11.7610892 9.49437772,11.7610892 C10.4879005,11.7610892 11.2933098,10.9745889 11.2933098,10.0043917 L11.2933098,10.0043917 L11.2873464,9.86031524 C11.2122986,8.95751078 10.4382244,8.24769433 9.49437772,8.24769433 Z M10.1150093,-1.44328993e-13 C11.6052935,-1.44328993e-13 12.8134075,1.17975033 12.8134075,2.63504611 C12.810984,2.82027917 12.8607707,3.00259594 12.9573221,3.16205534 C13.1005848,3.4089241 13.3389912,3.58959879 13.6194445,3.66384036 C13.8998978,3.73808193 14.1991078,3.699725 14.4504357,3.55731225 C15.7166624,2.88418026 17.3010837,3.30193043 18.0483,4.50592885 C18.2548102,4.87335233 18.1278399,5.33443771 17.7604709,5.55116381 C17.3871594,5.75928058 16.9119889,5.6384028 16.6901062,5.27887571 L16.6901062,5.27887571 L16.6194327,5.1754002 C16.2908071,4.74960935 15.6817056,4.62034539 15.1969926,4.89240228 C14.3710046,5.3340714 13.3689751,5.32328725 12.553156,4.86394851 C11.7373368,4.40460977 11.2257575,3.56317174 11.2033632,2.6438296 C11.2131151,2.35592011 11.1027692,2.07647732 10.8975968,1.8694985 C10.6924243,1.66251968 10.4100019,1.54573627 10.1150093,1.54589372 L10.1150093,1.54589372 L8.88274079,1.54589372 C8.58696967,1.54580638 8.30368621,1.6623152 8.09709986,1.86901212 C7.8905135,2.07570904 7.77811912,2.35508982 7.7853922,2.6438296 C7.77705279,3.5681803 7.26506951,4.4181882 6.44181545,4.87447051 C5.61856138,5.33075283 4.6087325,5.32419777 3.79176287,4.85726834 L3.79176287,4.85726834 L3.75578423,4.82213439 L3.66924268,4.76137496 C3.37175784,4.52112323 3.29446603,4.09717449 3.50393374,3.76811595 C3.73244398,3.409143 4.21568958,3.29903296 4.58329301,3.5221783 C4.74737874,3.61567616 4.93305,3.66704793 5.12297264,3.67149758 C5.41407245,3.68338695 5.69806446,3.58174102 5.91234656,3.38896624 C6.12662867,3.19619145 6.2536083,2.92811463 6.26529455,2.6438296 C6.2597607,1.21544702 7.42066447,0.0428415621 8.88274079,-1.44328993e-13 L8.88274079,-1.44328993e-13 Z'/></g></svg>
Download Icon - <!-- Download --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>
Cloud Download -
<!-- Cloud download --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>
Codepen Icon -
<!-- Codepen --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2'/><line x1='12' x2='12' y1='22' y2='15.5'/><polyline points='22 8.5 12 15.5 2 8.5'/><polyline points='2 15.5 12 8.5 22 15.5'/><line x1='12' x2='12' y1='2' y2='8.5'/></svg>
<!-- Term --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12' y1='16' y2='16'/></svg>
Code Icon -
<!-- Code --><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'></path></svg>
Tag Icon -
<!-- Tag --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'></path><line x1='7' x2='7' y1='7' y2='7'></line></svg>
Camera -
<!-- Camera --><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'></path><circle cx='12' cy='13' r='4'></circle></svg>
Leptop Icon -
<!-- Laptop --><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28,21H27V7a1,1,0,0,0-1-1H6A1,1,0,0,0,5,7V21H4a1,1,0,0,0-1,1,5,5,0,0,0,5,5H24a5,5,0,0,0,5-5A1,1,0,0,0,28,21ZM7,8H25V21H7ZM24,25H8a3,3,0,0,1-2.83-2H26.83A3,3,0,0,1,24,25Z'></path><path d='M19,11.79l-4.29,4.3L13,14.29a1,1,0,0,0-1.42,1.42l2.5,2.5a1,1,0,0,0,1.42,0l5-5A1,1,0,0,0,19,11.79Z'></path></svg>
Phone Icon -
<!-- Phone --><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'><path d='M91,0H37A11,11,0,0,0,26,11V117a11,11,0,0,0,11,11H91a11,11,0,0,0,11-11V11A11,11,0,0,0,91,0ZM32,22.69H96V99.58H32ZM37,6H91a5,5,0,0,1,5,5v5.69H32V11A5,5,0,0,1,37,6ZM91,122H37a5,5,0,0,1-5-5V105.58H96V117A5,5,0,0,1,91,122Z'></path><circle cx='64' cy='113.91' r='6'></circle><path d='M56.13,14.22H71.88a3,3,0,1,0,0-6H56.13a3,3,0,1,0,0,6Z'></path></svg>
Post a Comment