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