WP SVG Icon Demo Site
WP SVG Icons - Free WordPress Icon Plugin

WordPress SVG Icons Plugin

Download Nowfor free   Fork Meon GitHub
Fork me on GitHub

Insert Icons Anywhere!

  • 500+ Included Icons

    Featuring over 500+ Icons to choose from for your projects. All of the included icons are beautifully hand crafted and pixel perfect.

  • Use Anywhere

    You can use these icons anywhere you want! Insert icons directly into new posts, include them in your posts title, add them to your navigation or place them any where inside of your themes or templates.

  • Highly Customizable

    Combined with the provided CSS3 classes the icons are extremely customizable. Mix and match classes to get the perfect icon for your project, or add your own CSS3 styles. The possibilities are endless!

  • Optimized SVG

    All 500+ included icons are in vector format meaning they will not lose quality no matter how large you choose to make them. These icons are perfectly ready to meet your responsive design needs.

About the WP SVG Icons Plugin

  • Inception

    I created this plugin because I found that I often was re-importing the same set of web font icons on to every site I was developing. I had some free time and converted my @web-font package in to an easy to implement and easy to use plugin for use on freelance projects and personal blogs. After seeing the power and potential of the plugin, I decided to release it to the WordPress community free of charge. Through my time in development I have learned and taken so much away from the WordPress community. Every member of it has been helpful and an instrumental part in my success as a web developer. I wanted to create something with the knowledge I've gained and share it with everyone, so you too can pretty-fy your site with beautiful and highly customizable vector icons.

    Updates

    I frequently update the plugin with new modern icons. Users can request icons (for a small fee) and I will include them in to the plugin. You can drop me a line here and attach your svg files and I'll get back to you within 24 hours.

  • wp-svg-icons-image-1

Pro Version In Development

Enter your name and email address below to get notifications about plugin updates, features and releases. (email address is for internal use only and will not be shared with anyone)

Send Me Updates

  • Please provide a valid email address
  • Icon Customizer

    Easily change font-size, icon color, make the icon a link and more with our easy to use and inuitive icon customizer. From the 'New Post' screen users can now select an icon, set the font size, add an animation and insert the icon into the post all with just a few clicks of the mouse. No codeing skills required.

     

  • CSS3 Animations

    The pro version will come complete with pre-built and easily assignable CSS3 animated classes. For a preview of animations included please review Animate.CSS by Dan Eden

     

  • Buttons

    Include icons in buttons on both the front end and back end of your site. The icons included in this plugin work great in UI development for web applications and mobile sites.

Expansion Section

This is an ever growing section of the plugin. All icons seen in this section were either requested by users, paid to be included by contributors, or asked to be included by icon designers.

If you want to see some of your icons make it into the plugin, please get in contact with me here, tell me a little bit about yourself and the icons and attach them to the form.

How To Use/Sample Code

Here are samples for ways in which you can use the icons. I have provided you with the necessary code to achieve the desired effect. Just copy the code and include it anywhere in your theme. The attached classes are included with the plugin.

  • Step 1: Install WP SVG Icons onto your WordPress site.
  • Step 2: Select an icon from above.
  • Step 3: Click 'Get Sample Code'.
  • Step 4: Copy the provided html code below the desired element.
  • Step 5: Paste the html code into your post, page or theme.
  • Step 6: Enjoy the simplicty.

Buttons

Note: You must have twitter bootstrap button CSS and JS loaded on your site to achieve the results below. You can get the CSS here. You can grab a copy of the JS file here.

  • Internal/External Links

  • Icon with a Drop Shadow

  • Add CSS3 Animations

Pre-Defined Classes For Easy Styling

The WP SVG Icon plugin is built up using pre-defined CSS3 classes for easy icon manipulation. Some of the classes that come with the WP SVG Icon Plugin are classes for adding dropshadows, rounded corners, rotating animations and increasing or decreasing icon size. Its so simple!

    • DropShadow

    • wpSVGiconDropShadow - This class will add a drop shadow to the icon you have placed it on.
    • Animations

    • wpSVGanimatedSpin-fast - This class will make your icon rotate in a clockwise direction at 1 full spin per second.
    • wpSVGanimatedSpin-medium - This class will make your icon rotate in a clockwise direction at 3 full spins per second.
    • wpSVGanimatedSpin-slow - This class will make your icon rotate in a clockwise direction at 5 full spins per second.
    • Floats

      (great when using icons inside of posts)
    • wpSVGfloatLeft - Add this class to your icon to float the icon left and add a 13px right margin.
    • wpSVGfloatRight - Add this class to your icon to float the icon right and add a 13px left margin.
    • wpSVGnoFloat - Add this class to your icon when you want the icon on its own line.
    • Link

    • wpSVGlink - Add this class to anchor elements to allow for smooth icon color transitions on hover (the end color is whatever your site's style for a:hover is).
    • Icon Size

    • wpSVGsmall - Adding this class to your icon will set the size to 1.5em.
    • wpSVGmedium - Adding this class to your icon will set the size to 4em.
    • wpSVGlarge - Adding this class to your icon will set the size to 6.5em.
    • wpSVGxlarge - Adding this class to your icon will set the size to 9em.
    • Border Radius

    • wpSVGroundedCorners - Add this class to the element your icon is contained in, to make the container have 50% rounded corners.

NEW Custom Font Pack Uploader

Now featuring the highly anticipated custom icon pack uploader! Create custom combinations of icons off of IcoMoon and upload them directly to the plugin. After that you can start inserting them into pages! Absolutely no coding is needed!

Upload Custom Icon Pack Demo

How To:

  • Step 1: Go to Icomoon.io
  • Step 2: Import icons from the iconmoon icon library
  • Step 3: Select all of the icons you wish to use
  • Step 4: Click 'Font' at the bottom of your browser window
  • Step 5: Click 'Preferences' at the top, and give your icon pack a recognizable name, and if you'd like, a personalized prefix
  • Step 6: Download your font pack, and upload it to the plugin!

Uploading Your Own Icons

Have SVG icons of your own that you've created in Adobe Illustrator? No problem. Follow the tutorial below to get your icons imported into the plugin!

Video Tutorial

Free SVG Icon Libraries

Here's a list of some great SVG icon libraries on the web. You can download icons from these sites in .svg format, import the files into icomoon and download the pack for use.

If you need help, check the video tutorial below.

Video Tutorial Using Iconmonstr

Adding More IconsTo An Existing Pack

Sometimes you may want to add more icons to your custom pack. The plugin allows for you to easily add more icons on without destroying any of your existing icons. Check out the tutorial video below for help!

Video Tutorial On Adding More Icons

More Reasons To Download...

  • Living Project

    This project is still a living project, meaning that it will receive frequent updates and will continue to grow and get better as we move into the coming years.

    Awesome Support

    I provide top quality, unmatched support. If you would like premium support, please consider making a donation. I keep track of all donors, and keep them at the top of the support list.

  • Open Source Project

    After beginning development for this project, I fell in love with the open source community. I have put all the code for this project up on GitHub so that any one interested in helping out with development can do so. I am always looking for others to help out as I love collaborating.

  • It's Free

    I mean seriously...do you really need any more of a reason than that? A lot of up and coming developers and companies are beginning to charge monthly fees for plugins and themes they develop. While that is the only sure fire way that I can sustain my self, that just isn't the direction I want to take with my projects. I believe in collaboration over competition, so if your knowledgeable enough grab a copy of the code and help out!

What The Community Is Saying...

  • This is a perfect plugin to add social media icon and other icon for web apps. It's the only one that works exactly how I need it to. Thanks Evan!

    RedWineShiraz

  • This plugin is really awesome. UI Designers will have a lot of fun.
    Also, saves a LOT of time. Thanx for the plugin.

    SugarToys

  • Im really happy to have met this plugin. Our web projects always need relevant icons and im realy thankful for your work. Best wishes.

    SerkanBalta

Back to Top