🎉 Try Slides With Friends — Icebreakers, Team Building Games, Wordclouds & more! Check it out →

CSS Outlined Icon Buttons

Outlined  Icon  Buttons 800X518 1
  • Image Thumbnail
  • Image Thumbnail
  • Image Thumbnail
  • Image Thumbnail

This week's free download is a huge collection of fully coded outlined web buttons. They are super easy to implement into your existing projects, and make use of CSS3 transitions to only display the icons when you hover over the button. We have also included standard large, medium and small buttons. All available in 5 default colors. No bitmap images are used, only vector .svg files.

Live Preview

Be sure to check out the live preview!

Instructions for use

  • Upload the css file and icons folder to your server
  • Link to the stylesheet in the head of the page you want to use the buttons
  • Use the code:
    <a class="ml-outlined-button color-1 icon" href="#">Arrow <img class="icn" src="icons/icn-arrow.svg"/></a>
    where you want the button to appear
  • This code is for a blue, arrow icon button. Update the color and icon variables as required

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

  • Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
  • You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.


Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.


You've successfully logged in!