<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-bubble" viewBox="0 0 32 32">
      <title id="title">bubble</title>
      <path class="path1" d="M16 7c0.276 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5c-5.327 0-10 2.804-10 6 0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5c0-3.794 5.037-7 11-7zM16 2c-8.837 0-16 5.373-16 12 0 4.127 2.779 7.766 7.008 9.926 0 0.027-0.008 0.045-0.008 0.074 0 1.793-1.339 3.723-1.928 4.736 0.001 0 0.002 0 0.002 0-0.047 0.11-0.074 0.231-0.074 0.358 0 0.5 0.405 0.906 0.906 0.906 0.094 0 0.259-0.025 0.255-0.014 3.125-0.512 6.069-3.383 6.753-4.215 0.999 0.147 2.029 0.229 3.086 0.229 8.835 0 16-5.373 16-12s-7.164-12-16-12zM16 24c-0.917 0-1.858-0.070-2.796-0.207-0.097-0.016-0.194-0.021-0.29-0.021-0.594 0-1.163 0.264-1.546 0.73-0.428 0.521-1.646 1.684-3.085 2.539 0.39-0.895 0.695-1.898 0.716-2.932 0.006-0.064 0.009-0.129 0.009-0.184 0-0.752-0.421-1.439-1.090-1.781-3.706-1.892-5.918-4.937-5.918-8.144 0-5.514 6.28-10 14-10 7.718 0 14 4.486 14 10s-6.281 10-14 10z"></path>
    </symbol>
  </defs>
</svg>
<div class="main">
  <svg class="icon icon-bubble icon-larger"><use xlink:href="#icon-bubble"></use></svg>
  <svg class="icon icon-bubble icon-smaller"><use xlink:href="#icon-bubble"></use></svg>
</div>
.main {
  margin: 0 40px;
}

.icon-larger {
  width: 60px;
}

.icon-smaller {
  width: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.