Circular social media icon buttons for Facebook, Twitter, Instagram, and LinkedIn with brand colors and hover states.

Step 1: Circle Template

48×48px circle shape. This is the standard social icon button size.

Step 2: Facebook Button

Fill #1877f2. White "f" icon centered. Add subtle Inner Shadow for depth.

Step 3: Twitter / X Button

Fill #000000. White bird/X icon. Match current brand guidelines.

Step 4: Instagram Button

Radial gradient: #f58529, #dd2a7b, #8134af. White camera icon outline.

Step 5: LinkedIn Button

Fill #0a66c2. White "in" text at 18px bold.

Step 6: Hover States

For each: lighten fill 10%, add Outer Glow matching brand color at 30%.

Step 7: Export PNG Set

Export each at 48px and 96px (2x). Include hover variants in sprite sheet.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.