JSFiddle - React, Tailwind, and code Playground

HTML

<div class="icon">
    <div class="brigade child brigade-purple-left">&nbsp;</div>
    <div class="brigade child brigade-purple-middle">&nbsp;</div>
    <div class="brigade child brigade-purple-right">&nbsp;</div>
    <div class="icon-type child icon-hero">&nbsp;</div>
</div>

<input id="resize" type="submit" value="resize" />

CSS

.brigade-purple-left {width:27px;height:71px;background-position:-287px -12px;display:inline-block;background-repeat:no-repeat;}
            .brigade-purple-middle {width:30px;height:71px;background-position:-334px -12px;display:inline-block;background-repeat:no-repeat;}
            .brigade-purple-right {width:28px;height:71px;background-position:-384px -12px;display:inline-block;background-repeat:no-repeat;}
            .brigade-blue-left {width:27px;height:71px;background-position:-287px -87px;background-repeat:no-repeat;}
            .brigade-yellow-left {width:27px;height:71px;background-position:-287px -162px;background-repeat:no-repeat;}
            .brigade-green-left {width:27px;height:71px;background-position:-287px -236px;background-repeat:no-repeat;}
            .brigade-silver-left {width:27px;height:71px;background-position:-287px -311px;background-repeat:no-repeat;}
            .brigade-blue-middle {width:30px;height:71px;background-position:-334px -88px;background-repeat:no-repeat;}
            .brigade-yellow-middle {width:30px;height:71px;background-position:-334px -163px;background-repeat:no-repeat;}
            .brigade-green-middle {width:30px;height:71px;background-position:-334px -237px;background-repeat:no-repeat;}
            .brigade-silver-middle {width:30px;height:71px;background-position:-334px -312px;background-repeat:no-repeat;}
            .icon-hero {width:87px;height:71px;background-position:-11px -11px;background-repeat:no-repeat;}
            .icon .brigade { margin: 0; float: left; }
            .icon .icon-type { position: absolute; left: 0; top: 0; }

            .icon .brigade, .icon .icon-type {background-image:url('http://i46.tinypic.com/34qljmh.png');}
            .icon { position: relative; width: 87px; }

JavaScript

$(document).ready(function () {
    $('#resize').click(function (e) {
        e.preventDefault();
        var resizeTo = 100,
            resizeRatio = Number(resizeTo) / Number($(".icon").width());

        $(".icon").css('width', resizeTo);
        $(".child").each(function () {
            var childWidth = Number($(this).width()),
                childHeight = Number($(this).height()),
                newChildWidth = childWidth * resizeRatio,
                newChildHeight = childHeight * resizeRatio;
            $(this).css({ 'width': newChildWidth, 'height': newChildHeight });
        });
    });
});