12K SVG Icons for WPBakery Page Builder

12k SVGIcons for WPBakery Page Builder

(formerly Visual Composer)

SVG Icon Background Shapes

Normal

Circle

Square

Rounded

Circle Outline

Square Outline

Rounded Outline

SVG Icon Button Styles

Icon Sample Links

Animation

Bouncing Entrances

Bounce In
Bounce In Down
Bounce In Left
Bounce In Right
Bounce In Up

Fading Entrances

Fade In
Fade In Down
Fade In Down Big
Fade In Left
Fade In Left Big
Fade In Right
Fade In Right Big
Fade In Up
Fade In Up Big

Flippers

Flip In X
Flip In Y

Special

Roll In

Zoom Entrances

Zoom In
Zoom In Down
Zoom In Left
Zoom In Right
Zoom In Up

Slide Entrances

Slide In Down
Slide In Left
Slide In Right
Slide In Up

Defaults

Top To Bottom
Bottom To Top
Left To Right
Right To Left
Appear From Center

12,000+ SVG Icons Included

12K SVG icons allows you to choose from a wide array of more than 12,000 icons. And because the icons are in the SVG format, you get better, high-quality icons with excellent scaling and overall faster loading time. Everything will not be loaded, only the searched icon names will be loaded.

  • ant-design
  • bootstrap
  • devicons
  • elusive-iconfont
  • entypo
  • evil-icons
  • flag-icon
  • flat-ui
  • font-awesome
  • foundation
  • game-icons
  • geomicons-open
  • icomoon-free
  • ioncons
  • maki
  • map-icons
  • material-design
  • metro-ui-css
  • mfglabs-iconset
  • octicons
  • open-iconic
  • payment-font
  • payment-webfont
  • semantic-ui
  • simple-icons
  • subway
  • typicons
  • weather-icons
  • windows-icons
  • zero
  • zocial
  • logos(svg porn)

Clean Interface

Selecting icons shouldn’t be hard. We have a search bar, a drop down filter and color pickers to make choosing the perfect icon super easy.

Shortcode for Non-WPBakery Page Builder Users

You can use the svg_icon shortcode inside your content if you want a more customized experience. With this, you can place your icons anywhere.

Parameter Default Type Description
icon string The name of the icon to display. Since there are a ton of icons, it might be better to use the 12K Icon element in VC to find the icon you’re looking for since there’s a search function there.
icon_color #9b59b6 string The color of the icon.
icon_size 40 number The size of your icon in pixels.
bg_shape string The background shape of the icon. Values can be: none, circle, square, rounded, circle-outline, square-outline or rounded-outline.
custom_svg 8 string If you want to use your own SVGs, paste the whole SVG code.
link url Enter a URL here to make your icon a link.
css_animation string Select type of animation for element to be animated when it “enters” the browsers viewport.
float none string The float rule of the icon, values can be: none, left or right.
force_color string Check this to force our own color (this may affect multi-colored icons, and may not work with some icons).
el_class 20 number Style particular content element differently – add a class name and refer to it in custom CSS.
css string You can add an extra class name to this icon. Useful if you want to add custom CSS styles to it.

If you are using an icon shape other than outline, you can use these other parameters

Parameter Default Type Description
bg_color #bdc3c7 color The background color for your icon.

Using the Shortcode for SVG Icon Button

You can use the svg_icon_button shortcode inside your content if you want a more customized experience. With this you can place your icons anywhere.

Parameter Default Type Description
title string The text of the button.
link url Enter a URL here to make your icon button a link.
style modern string The style of the icon button. Values can be: modern, classic, flat, outline, 3d, custom, outline-custom, gradient or gradient-custom.
shape  rounded string The shape of the button icon. Values can be: rounden, square or round.
size  md (Normal) string Select button display size. Values can be: xs (Mini), sm (Small), md (Normal) or lg (Large).
align  inline string Select button alignment. Values can be: inline, left, right or center.
icon_button  awesome/wordpress string Choose an icon. Type in the text box above to search for a specific icon. Use the drop down above to filter or show icons from specific icon sets.
el_class string Style particular content element differently – add a class name and refer to it in custom CSS.
custom_onclick string Insert inline onclick javascript action.
css_animation string Select type of animation for button to be animated when it “enters” the browsers viewport.
custom_svg string If you want to use your own SVGs, paste the whole SVG code.

If you are using an icon shape other than outline, you can use these other parameters

Parameter Default Type Description
gradient_color_1 turquoise color The first color of gradient for your icon button.
gradient_color_2 blue color The second color of gradient for your icon button.
gradient_custom_color_1 #dd3333 color The first custom color of gradient for your icon button.
gradient_custom_color_2 #eeee22 color The second custom color of gradient  for your icon button.
gradient_text_color #ffffff color The button text color for your icon button.
custom_background #ededed color The custom background color for your icon button.
custom_text #666 color The custom text color for your icon button.
outline_custom_color #666 color The outline and text color for your icon button.
outline_custom_hover_background #666 color The hover background color for your icon button.
outline_custom_hover_text #fff color The hover text color for your icon button.
color grey color The icon button color.
button_block string Set full width of icon button.
i_align left string The alignment of your icon button. Values can be: left or right.
custom_onclick_code string The onclick action code.

List of Animations in SVG Icons and SVG Icon Buttons

Bouncing Entrances

  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp

Fading Entrances

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig

Flippers

  • flipInX
  • flipInY

Lightspeed

  • lightSpeedIn

Rotating Entrances

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Special

  • rollIn

Zoom Entrances

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp

Slide Entrances

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

Defualts

  • topToBottom
  • bottomToTop
  • leftToRight
  • rightToLeft
  • appearFromCenter