<style>
  .share {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: block;

    width: max-content;
  }

  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPHBhdGggZD0iTSAxOCAyIEEgMyAzIDAgMCAwIDE1IDUgQSAzIDMgMCAwIDAgMTUuMDU0Njg4IDUuNTYwNTQ2OSBMIDcuOTM5NDUzMSA5LjcxMDkzNzUgQSAzIDMgMCAwIDAgNiA5IEEgMyAzIDAgMCAwIDMgMTIgQSAzIDMgMCAwIDAgNiAxNSBBIDMgMyAwIDAgMCA3LjkzNTU0NjkgMTQuMjg3MTA5IEwgMTUuMDU0Njg4IDE4LjQzOTQ1MyBBIDMgMyAwIDAgMCAxNSAxOSBBIDMgMyAwIDAgMCAxOCAyMiBBIDMgMyAwIDAgMCAyMSAxOSBBIDMgMyAwIDAgMCAxOCAxNiBBIDMgMyAwIDAgMCAxNi4wNjI1IDE2LjcxMjg5MSBMIDguOTQ1MzEyNSAxMi41NjA1NDcgQSAzIDMgMCAwIDAgOSAxMiBBIDMgMyAwIDAgMCA4Ljk0NTMxMjUgMTEuNDM5NDUzIEwgMTYuMDYwNTQ3IDcuMjg5MDYyNSBBIDMgMyAwIDAgMCAxOCA4IEEgMyAzIDAgMCAwIDIxIDUgQSAzIDMgMCAwIDAgMTggMiB6Ij48L3BhdGg+PC9zdmc+");
  }

  .x .icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJYIGxvZ28iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDMwMCAyNzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJtMjM2IDBoNDZsLTEwMSAxMTUgMTE4IDE1NmgtOTIuNmwtNzIuNS05NC44LTgzIDk0LjhoLTQ2bDEwNy0xMjMtMTEzLTE0OGg5NC45bDY1LjUgODYuNnptLTE2LjEgMjQ0aDI1LjVsLTE2NS0yMThoLTI3LjR6Ii8+PC9zdmc+");
  }

  .line .icon {
    background-color: #03C755;
    background-image: url("data:image/svg+xml;base64,IDxzdmcgYXJpYS1sYWJlbD0iTGluZSBsb2dvIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xMi45MSA2LjU3Yy4yMzIgMCAuNDIuMTkuNDIuNDIgMCAuMjMtLjE4OC40Mi0uNDIuNDJoLTEuMTd2Ljc1aDEuMTdhLjQyLjQyIDAgMSAxIDAgLjg0aC0xLjU5YS40Mi40MiAwIDAgMS0uNDE4LS40MlY1LjRjMC0uMjMuMTg4LS40Mi40Mi0uNDJoMS41OWEuNDIuNDIgMCAwIDEtLjAwMi44NGgtMS4xN3YuNzVoMS4xN3ptLTIuNTcgMi4wMWEuNDIxLjQyMSAwIDAgMS0uNzU3LjI1MWwtMS42My0yLjIxN1Y4LjU4YS40Mi40MiAwIDAgMS0uNDIuNDIuNDIuNDIgMCAwIDEtLjQxOC0uNDJWNS40YS40MTguNDE4IDAgMCAxIC43NTUtLjI0OUw5LjUgNy4zNjZWNS40YzAtLjIzLjE4OC0uNDIuNDItLjQyLjIzIDAgLjQyLjE5LjQyLjQydjMuMTh6bS0zLjgyOCAwYzAgLjIzLS4xODguNDItLjQyLjQyYS40Mi40MiAwIDAgMS0uNDE4LS40MlY1LjRjMC0uMjMuMTg4LS40Mi40Mi0uNDIuMjMgMCAuNDE4LjE5LjQxOC40MnYzLjE4ek00Ljg2OCA5aC0xLjU5Yy0uMjMgMC0uNDItLjE5LS40Mi0uNDJWNS40YzAtLjIzLjE5LS40Mi40Mi0uNDIuMjMyIDAgLjQyLjE5LjQyLjQydjIuNzZoMS4xN2EuNDIuNDIgMCAxIDEgMCAuODRNMTYgNi44N0MxNiAzLjI5IDEyLjQxLjM3NiA4IC4zNzZTMCAzLjI5IDAgNi44N2MwIDMuMjA4IDIuODQ2IDUuODk2IDYuNjkgNi40MDUuMjYuMDU2LjYxNS4xNzIuNzA1LjM5NC4wOC4yLjA1My41MTguMDI2LjcyMiAwIDAtLjA5Mi41NjUtLjExMy42ODUtLjAzNS4yMDMtLjE2Ljc5LjY5My40MzIuODU0LS4zNiA0LjYwNy0yLjcxNCA2LjI4NS00LjY0NkMxNS40NDUgOS41OTQgMTYgOC4zMDIgMTYgNi44NyI+PC9wYXRoPjwvZz48L3N2Zz4=");
  }
</style>

<div class="share">
  <span class="icon"></span>
  共有する
</div>

<br />

<div class="share x">
  <span class="icon"></span>
  共有する
</div>

<br />

<div class="share line">
  <span class="icon"></span>
  共有する
</div>