This is good work Sahil. It's easy to see you know what you are doing.
Thank you so much for the codepen and the explanation (in your first post). this is very helpful.
I am still unsure what approach is best but I decided to go with your first example simply because my membership does not allow me to download MorphSVGplugin at the moment.
Looking at your first example I can see you changed my original "d" attributes in the path elements. I get why you are doing it but I would like to know how you came up with these numbers. Did you change the paths directly in code or do you use a program to come up with these numbers?
If I want to animate this icon using the same effects: https://imgur.com/a/2vhi8 -. Should I then create paths the same way as in your codepen somehow? This is how my SVG file looks today. As you can see the "d" attribute looks very complicated.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<path id="Layer2_0_1_STROKES" data-name="Layer2 0 1 STROKES" d="M14.06,36.65a8.28,8.28,0,0,1,1.77-5.4A4.33,4.33,0,0,1,19,29.38h11.9a4.78,4.78,0,0,1,3.4,1.87,7.83,7.83,0,0,1,2,5.4" style="fill: none;stroke: #474747;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/>
<path id="Layer1_0_1_STROKES" data-name="Layer1 0 1 STROKES" d="M25.21,13.13a5.77,5.77,0,0,1,4.25,1.8,5.86,5.86,0,0,1,1.75,4.25,6.2,6.2,0,0,1-.5,2.47,6.94,6.94,0,0,1-1.25,1.78,6.11,6.11,0,0,1-8.5,0,6,6,0,0,1-1.55-6A5.61,5.61,0,0,1,21,14.93,5.75,5.75,0,0,1,25.21,13.13Z" style="fill: none;stroke: #454545;stroke-miterlimit: 10;stroke-width: 2px"/>
</svg>
All help is appreciated.