Social icon custom layout for email template. This layout allows for the social icons to be centered aligned and has fixes set so that alignment are rendering properly in Android and iOS. This layout does not collapse and will overwrite any media query collapsing.

social-icons.html

<!--
/**
 * Adjust the outter container width to match the total of all columns in the table
 */
-->
<div class="outter-container" style="display:flex; width:74px!important; max-width:74px!important;">
    <center style="margin:0; outline:none; padding:0; font-size:0px;">
        <table cellspacing="0" cellpadding="0" align="center" style="font-size:0; min-width:auto!important; mso-table-lspace:0pt; mso-table-rspace:0pt; margin:auto!important; display:table-cell!important; text-align:center!important;">
            <tr>
                <td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
                    <a href="https://website.com/" style="margin:0; outline:none; padding:0;">
                            <img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
                    </a>
                </td>
                <td width="10" height="10" style="display:table-cell!important; font-size:0; width:10px!important;">&nbsp;</td>
                <td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
                    <a href="https://website.com/" style="margin:0; outline:none; padding:0;">
                            <img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
                    </a>
                </td>
            </tr>
        </table>
    </center>
</div>

Update 08/15/2018
The current version of this code ensures that each image will scale up to its intended (max) width.

<img src=" ..." style="max-width: 34px !important;">