Live Preview Extra Shortcodes Add-on
Details & Pricing →

Vector Icon

Color options

Get the code
[su_icon icon="icon: heart" color="#ff1259" text_color="#ff1259"] Light Gray & Red [/su_icon]

[su_icon icon="icon: star" background="#414141" color="#fff712" text_color="#414141"] Dark Gray & Yellow [/su_icon]

[su_icon icon="icon: user" background="#12b7ff" color="#ffffff" text_color="#12b7ff"] Blue & White [/su_icon]

Radius option

Get the code
[su_icon icon="icon: star" radius="0"][/su_icon]

[su_icon icon="icon: star" radius="10"][/su_icon]

[su_icon icon="icon: star" radius="100"][/su_icon]

Size options

Get the code
[su_icon icon="icon: star" size="16" shape_size="8" text_size="16"] 16 [/su_icon]

[su_icon icon="icon: star" size="24" shape_size="16" text_size="24"] 24 [/su_icon]

[su_icon icon="icon: star" size="32" shape_size="24" text_size="32"] 32 [/su_icon]

Icon with link

Get the code
[su_icon icon="icon: link" url="#" target="blank"] Clickable icon [/su_icon]

Stacked horizontally

Get the code
[su_icon icon="icon: heart"][/su_icon] [su_icon icon="icon: heart"][/su_icon] [su_icon icon="icon: heart"][/su_icon]

[su_icon icon="icon: heart"] With text [/su_icon] [su_icon icon="icon: heart"] With text [/su_icon] [su_icon icon="icon: heart"] With text [/su_icon]

Social icons

Get the code
[su_icon icon="icon: facebook" background="#3b5998" color="#ffffff" text_color="#3b5998" size="16" shape_size="8" radius="4"] Facebook [/su_icon]

[su_icon icon="icon: twitter" background="#1da1f2" color="#ffffff" text_color="#1da1f2" size="16" shape_size="8" radius="4"] Twitter [/su_icon]

[su_icon icon="icon: instagram" background="#e1306c" color="#ffffff" text_color="#e1306c" size="16" shape_size="8" radius="4"] Instagram [/su_icon]