A Plus Icon

<div class="flex justify-center items-center p-8">
  <style>:root { --primary-color: #7966F0; --highlight-color: #37B3F7; } .a-plus-icon { width: 120px; height: 120px; filter: drop-shadow(0px 8px 20px rgba(121, 102, 240, 0.4)); } .icon-gradient { fill: url(#aPlusGradient); stroke: var(--primary-color); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }</style>
  <svg viewBox="0 0 100 100" class="a-plus-icon" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <lineargradient id="aPlusGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:var(--highlight-color); stop-opacity:1"></stop>
        <stop offset="100%" style="stop-color:var(--primary-color); stop-opacity:1"></stop>
      </lineargradient>
    </defs>
    <path d="M 35 75 L 45 45 L 55 45 L 65 75 M 47 60 L 53 60" class="icon-gradient" fill="none" stroke-width="5"></path>
    <g transform="translate(72, 35)">
      <circle cx="0" cy="0" r="12" fill="var(--primary-color)" opacity="0.15"></circle>
      <line x1="-7" y1="0" x2="7" y2="0" stroke="var(--primary-color)" stroke-width="5" stroke-linecap="round"></line>
      <line x1="0" y1="-7" x2="0" y2="7" stroke="var(--primary-color)" stroke-width="5" stroke-linecap="round"></line>
    </g>
  </svg>
</div>