4k Icons WordPress Plugin for Visual Composer

4k icons is a Visual Composer shortcode add-on that gives you the awesome ability to use over 9,000 font icons in your WordPress site. You can add background shapes to your icons, adjust the size and colors, apply different hover effects, and align them to suit your every need.

9,000+ Icons Included

4k Icons was built to have all the icons you would ever want and need. We have a lot of social icons which you can turn into links. We even have all the US states and all the countries in the world as icons just in case you need them. Don’t worry, not everything will be loaded, only the used icon groups will so your site loading time will still be fast.

  • 105 Loops by Pranav (105 icons)
  • 50 Mini Icons by Victor Erixon (50 icons)
  • 80 Shades of White Icons by Victor Erixon (80 icons)
  • Any Old Icon by Ian Yates (69 icons)
  • Batch by Adam Whitcroft (361 icons)
  • Brandico by Fontello (45 icons)
  • Brankic1979 by Brankic1979 (350 icons)
  • Broccolidry by Visual Idiot (108 icons)
  • Clear Icons by Appzgear (100 icons)
  • Countricons by Freepik (194 icons)
  • Cuticons By Vaibhav Bhat (69 icons)
  • Dripicons by Amit Jakhu (95 icons)
  • Eco Ico by Matthew Skiles (40 icons)
  • Elusive Icons by Aristath (271 icons)
  • Entypo by Daniel Bruce (283 icon)
  • Fat Icons by Designerz Base (60 icons)
  • File Formats by Freepik (176 icons)
  • Font Awesome by Dave Gandy (360 icons)
  • Fontelico by Fontello (34 icons)
  • Foundation Icons – Accessibility by ZURB (26 icons)
  • Hand Drawn by Freepik (392 icons)
  • IcoMoon – Free By Keyamoon (451 icons)
  • Icon Minia by Egemen Kapusuz (139 icons)
  • Iconic by PJ. Onori (172 icons)
  • Ionicons by Drifty (525 icons)
  • Ligature Symbols by Kazuyuki Motoyama (251 icons)
  • Line Icon Set by Situ Herrera (122 icons)
  • Line Icons by Elegant Themes (100 icons)
  • Linecons by Sergey Shmidt (48 icons)
  • Maki by Mapbox (63 icons)
  • Map Icons by Scott de Jonge (170 icons)
  • Meteocons by Alessio Atzeni (47 icons)
  • MFG Labs by MFG Labs (153 icons)
  • Mobile Phones by Freepik (200 icons)
  • Modern Pictograms by John Caserta (91 icons)
  • MonoSocialIcons Font by Ivan Drinchev (288 icons)
  • Moon Phase 1 by Freepik (27 icons)
  • Multimedia by Freepik (52 icons)
  • OpenWeb Icons by Matthias Pfefferle (81 icons)
  • Payment Cards by Freepik (70 icons)
  • Payment Logos by Freepik (69 icons)
  • Silkcons by Vaibhav Bhat (116 icons)
  • Simpleicon Business by SimpleIcon (123 icons)
  • Simpleicon Ecommerce by SimpleIcon (96 icons)
  • Simpleicon Places by SimpleIcon (62 icons)
  • StateFace by ProPublica (53 icons)
  • Steadysets by Tommy Sahl (136 icons)
  • Typicons by Stephen Hutchings (90 + 308 icons)
  • Universal 08 by Freepik (91 icons)
  • Universal 12 by Freepik (90 icons)
  • Using Gesture by Mobiletuxedo (24 icons)
  • Video Games by Freepik (46 icons)
  • Weather Icons by Erik Flowers (91 icons)
  • Web Symbols by Just Be Nice Studio (85 icons)
  • WebHostingHub Glyphs by WebHostingHub (1,259 icons)
  • WPZoom Developer Icon Set by David Ferreria (154 icons)
  • Website Logos by Freepik (102 icons)
  • Zocial by Sam Collins (103 icons)

Normal

Circle

Square

Rounded

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.

Hover Effects

(Hover your mouse on these)

Faint Circle

Solid Outline

Fill Up

Border Solid

Border Thick

Flip Vertical

Flip Horizontal

Swipe Down

Swipe Up

Swipe Left

Swipe Right

Alignment Options

(4k icon paired with a text block, hover effects work here too)

Floated left and text block has overflow hidden. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet purus id venenatis blandit. Cras in est et sem sollicitudin euismod facilisis nec nisl. In hac habitasse platea dictumst. Sed viverra tristique nunc, a fermentum massa.

Icon centered. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet purus id venenatis blandit. Cras in est et sem sollicitudin euismod facilisis nec nisl. In hac habitasse platea dictumst. Sed viverra tristique nunc, a fermentum massa.

Floated right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet purus id venenatis blandit. Cras in est et sem sollicitudin euismod facilisis nec nisl. In hac habitasse platea dictumst. Sed viverra tristique nunc, a fermentum massa.

Social Icons

(This is a floated list of social icon links)

Using the Shortcode

You can use the 4k_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 4K Icon element in VC to find the icon you’re looking for since there’s a search function there.
icon_color #3498db string The color of the icon
icon_size 50 number The size of your icon in pixels
shape none string The background shape of the icon. Values can be: none, circle, square or rounded.
shape_type solid string The type of background shape for your icon. This is only applied when there are no hover effects. Values can be: solid, button, thin-border or thick-border
border_radius 8 number The border radius of the background shape in pixels. Only applies for rounded shaped icons.
link url Enter a URL here to make your icon a link.
link_new_window string Put new_window here to open the link above in a new window
float none string The float rule of the icon, values can be: none, left or right
overflow_next string If the next content box is a single text block, you can put overflow this field in order for the icon to occupy the whole height (not like when floated). This only applies when you have the float field set to left or right
margin 20 number The margin in pixels. By default this margin will be placed on the bottom of your icon. If floated left or right, this margin will also be used on the side the icon meets your content
extra_class 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
shape_color #dddddd color Pick a color for your icon’s background shape.
shape_size 60 number The size for your icon’s background shape in pixels.
hover_effect none string The hover effect to play when the mouse hovers over the icon. These changes are usually not available in VC’s frontend editor. The values can be:

  • none
  • faint-circle – Faint background shape that solidifies on hover with an outline
  • solid-outline – Solid background shape that gets smaller when hovered on and shows a border
  • flip-vertical – Solid background shape, that flips vertically when hovered with inverted colors
  • flip-horizontal – Solid background shape, that flips horizontally when hovered with inverted colors
  • swipe-down – Solid background shape, icon swipes down on hover and gets replaced with inverted colors
  • swipe-up – Solid background shape, icon swipes up on hover and gets replaced with inverted colors
  • swipe-left – Solid background shape, icon swipes left on hover and gets replaced with inverted colors
  • swipe-right – Solid background shape, icon swipes right on hover and gets replaced with inverted colors
  • fill-up – Outlined background shape that gets filled up from the bottom when hovered
  • border-solid – Border background shape that gets filled up from the edges when hovered
  • border-thick – Border background shape that gets smaller with another thicker border when hovered
hover_on icon string Choose the element which would trigger the hover effect. You may need to play around this value depending on your hover effect since some may have additional containers for the effect. (Changes may not be visible in the frontend editor). Values can be: icon, parent, parent2, parent3, or parent4Only applies for ‘faint-circle’, ‘solid-outline’, ‘solid-outline2’, ‘flip-vertical’, ‘flip-horizontal’, ‘swipe-down’, ‘swipe-up’, ‘swipe-left’, ‘swipe-right’, ‘fill-up’, ‘border-solid’, ‘border-thick’ hover effects

Leave a Reply

Your email address will not be published. Required fields are marked *