Neon Social Media Icons

aartigoyal

Jan 29, 2026 3

Live Preview

Live Editor

<div class="socials">
  <div class="social">
    <!-- Twitter / X -->
    <svg viewBox="0 0 24 24">
      <path d="M4 4l16 16M20 4L4 20"/>
    </svg>
  </div>

  <div class="social">
    <!-- Instagram -->
    <svg viewBox="0 0 24 24">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17" cy="7" r="1"/>
    </svg>
  </div>

  <div class="social">
    <!-- LinkedIn -->
    <svg viewBox="0 0 24 24">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <line x1="7" y1="10" x2="7" y2="17"/>
      <line x1="7" y1="7" x2="7" y2="7"/>
      <path d="M11 17v-4a2 2 0 0 1 4 0v4"/>
    </svg>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:Arial, sans-serif;
}

.socials{
  display:flex;
  gap:20px;
}

.social{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  cursor:pointer;
  position:relative;
  transition:.3s;
}

.social::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:linear-gradient(120deg,#00e5ff,#6a5cff,#ff00cc);
  filter:blur(6px);
  opacity:.7;
}

.social svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:#00e5ff;
  stroke-width:2;
  z-index:1;
  transition:.3s;
}

.social:hover{
  transform:translateY(-6px) scale(1.05);
}

.social:hover svg{
  stroke:#fff;
}

Categories

Neon Social Media Icons

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet