Vertically align SVG icons to center in UL

I have created a sample code for this, so that will make more sense. I want to align all the icons vertically center. The icons are having different sizes. I have added borders for debugging purpose so we can see exactly if it is vertically centered or not.

I know a method to give fixed width to the LI tag and then vertically align the A tag by making is position absolute, but I am looking for more flexible solution as in this example I have given fixed width to SVG files but that will not happen in main site.

Thank You.

.wrapper {
  width: 300px;
  margin: 50px auto;
  border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
}
.wrapper ul.socialmedia-menu li {
  list-style: none;
  border: 1px solid blue;
}
.wrapper ul.socialmedia-menu li a svg {
  width: 30px;
  height: auto;
}

<div class="wrapper">
  <ul class="socialmedia-menu">
      <li>
        <a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
          </svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
      </li>
  </ul>
</div>


<!--- SVG DEFINITIONS : You can skip looking at it :) -->

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_instagram">
		<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_twitter">
		<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
	</g>
	</defs>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_pinterest">
		<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_facebook">
		<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_tumblr">
		<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_email">
		<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
	</g>
	</defs>
</svg>

Solution

display:flex on the parent item li with align-items to vertical align center the SVG.

.wrapper ul.socialmedia-menu li{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

.wrapper {
  width: 300px;
  margin: 50px auto;
  border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
}
.wrapper ul.socialmedia-menu li {
  list-style: none;
  border: 1px solid blue;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.wrapper ul.socialmedia-menu li a svg {
  width: 30px;
  height: auto;
}

<div class="wrapper">
  <ul class="socialmedia-menu">
      <li>
        <a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
          </svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
      </li>
      <li>
        <a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
      </li>
  </ul>
</div>


<!--- SVG DEFINITIONS : You can skip looking at it :) -->

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_instagram">
		<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_twitter">
		<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
	</g>
	</defs>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_pinterest">
		<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_facebook">
		<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_tumblr">
		<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
	</g>
	</defs>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
	<defs>
	<g id="i_email">
		<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
	</g>
	</defs>
</svg>