Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Social Icons for Elementor Social media icons that link to your profiles, with hover animations

Social Icons is the social icons widget for Elementor. Add Elementor social media icons in a row or a column to your header, footer or contact page. Each icon links to one of your social profiles and gets its own colour and background. Then pick a hover animation. A free Elementor social icons widget that works on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • Brand colours per icon
  • Row or column
  • Hover animations

Classic widget · Elementor 3 and 4Updated

Live demos

Five social icon designs, live

Five sets of social icons, each placed where profile links usually go: a footer, a news card, a film page, a side rail and a contact block. Hover an icon, or tab to it with the keyboard.

HaldenProductChangelogPricing
Halden 3.2 · Release notes

What changed this month

  • NewShared timelines for client projects
  • ImprovedFaster search across every board
  • FixedCalendar sync for teams in two time zones

Product news, where you already are

Every release, tip and roadmap update, posted on the channels you follow.

Product news card

Elementor social icons brand colors, one per network

The release notes page of a planning app. Each icon has the color of its network and slightly rounded corners. On hover the icon wobbles from its top corner.

Hover an icon

In the panel, open each item in Social Icons and set its Background Color. In the Style tab, set Border Radius to 5 and Hover Animation to Wobble Bottom.

Sahara FilmsFilmsJournalAbout
A guide in a blue scarf at the edge of the dunes
Now showing

Copper Hours

Twelve days of sand and wind in the Erg Chebbi dunes. Follow the crew for clips from the shoot.

Film page

Elementor social icons hover effect: plain icons that grow

A film page over a dark photo. Plain white icons with no background sit under the synopsis. On hover each one turns orange and grows a little.

Hover an icon

In the Style tab, set Color in Icon to white and Color in Icon Hover to orange. Set Hover Animation to Grow.

Maison FormeProjectsCollectionStudio
Follow
A calm living room with a low linen sofa
New collection

Calm rooms, built to last

Low sofas in washed linen, oak tables and wool rugs, made in small runs in Copenhagen.

View the collection
Furniture shop

Elementor vertical social icons beside an image

The collection page of a furniture maker. A column of icons in network colors runs beside the main photo. On hover an icon gives a short buzz.

Hover an icon

In the panel, set Direction to column and Alignment to Center. In the Style tab, set Hover Animation to Buzz Out.

MalepèreEstateWinesVisit
A tasting room with warm wooden walls
Visit the estate

Come for a tasting

Address
Route de Malepère, 11290 Arzens
Open
Tuesday to Sunday, 10:00 to 18:00
Bookings
+33 4 68 00 00 00

Follow the harvest

Winery contact page

Elementor social icons animation: outlined boxes

The visit page of a winery, under the opening hours. Light grey icons sit in thin outlined boxes. On hover the icon turns white and the box grows and tilts a little.

Hover an icon

In the Style tab, add a 1 px Border and a Border Radius of 6 in Icon. Set Hover Animation to Grow Rotate.

Features

Key features of Social Icons

Every feature below is a setting in the widget panel. No custom code.

Any icon for any network

Pick each Icon from the Font Awesome brand icons, such as Facebook, Instagram, LinkedIn, YouTube, GitHub or WhatsApp, or upload your own SVG.

Elementor social links to your profiles

Add a Link to each icon. Elementor social icons open in new tab by default, and the link accepts dynamic tags.

Colour per icon

Give each social network its own Color and Background Color in the repeater, or one style for all in the Style tab.

Row or column

Set Direction to row for a social bar or column for a side rail, and choose the Alignment, per device.

Size and spacing

Set the Elementor social icons size with Size, the Padding around it and the Spacing between icons, in pixels.

Squares, rounded or circles

Add a Border Type, width and colour, and set the Border Radius for square, rounded or round icons.

Hover colours

In Icon Hover, set the hover Color, Background Color and Border Color.

Hover animations and labels

Choose an Elementor Hover Animation such as Grow, Float, Wobble Vertical, Buzz Out or Grow Rotate. Each link also prints a screen reader label with the network name, taken from the icon or from the SVG alt text.

Step by step

How to add social media icons in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install and activate Animation Addons for Elementor from WordPress.org, then turn on Social Icons in Animation Addons → Elements.

  2. Open your page, header or footer in Elementor, search the panel for Social Icons and drag it into place.

  3. In Social Icons, add one item per network. Pick the Icon, paste your profile Link and set its Color and Background Color.

  4. Set the Alignment and the Direction, then the Size, Padding, Spacing and Border Radius in the Style tab.

  5. In Icon Hover, choose the hover colours and a Hover Animation, check mobile and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Social Icons

How do I add social media icons in Elementor?

Install the free Animation Addons plugin, drag the Social Icons widget onto your page, header or footer, then add one item per network with its icon and profile link.

Is this a free Elementor social icons addon?

Yes. Social Icons is part of the free Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free and Elementor Pro.

Can I add Elementor custom social icons?

Yes, with your own SVG. The Icon control takes any Font Awesome icon or an uploaded SVG, when SVG uploads are allowed in Elementor. The SVG alt text becomes the screen reader label.

How do I change the Elementor social icons color?

To give an icon its brand colour, open the item in the Social Icons list and set its Color and Background Color, for example white on #0A66C2 for LinkedIn.

Can the icons stack in a vertical column?

Yes. Set Direction to column. Direction and Alignment are responsive, so you can use a row on mobile and a column on desktop.

Which hover animations can I use?

Any of Elementor's hover animations, such as Grow, Shrink, Pulse, Float, Bob, Wobble Vertical, Buzz Out and Grow Rotate. They play on hover and on keyboard focus.

Are these follow icons or share icons?

Follow icons. Each one links to a social profile you set. To share the current post on social networks, use the free Social Share widget.

Should I use this or Elementor's Social Icons?

Use Elementor's for one-click official colours and preset shapes. Use this one for a row or column per device and simple per-icon background colours.

Animation Addons Pro · Elementor 4

Your profiles, one click away

Free social media icons with brand colours, row or column layout and hover animations, on Elementor Free.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license