JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<button class=btn><div class="backup1"><div class="backup2"></div></div>Backups</button>

CSS

.backup1
    {
        height: 15px;
        width: 26px;
        background: url("data:image/svg+xml,%3Csvg class='svgXML' xmlns='http://www.w3.org/2000/svg' height='15px' viewBox='0 0 24 24' width='15px' fill='%237e32d3'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'%3E%3C/path%3E%3C/svg%3E") left no-repeat;
        display: inline-block;
        vertical-align: middle;
        margin-right:2px;
    }
    
    .backup2
    {
        height: 15px;
        width: 26px;
        background: url("data:image/svg+xml,%3Csvg class='svgXML' xmlns='http://www.w3.org/2000/svg' height='15px' viewBox='0 0 24 24' width='15px' fill='%23009900'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'%3E%3C/path%3E%3C/svg%3E") right no-repeat;
        display: inline-block;
    }

    .btn
    {
       opacity: 0.75;
    }

    .btn:hover
    {
        opacity:1;
    }