Halloween Sale 15% off Ends in See the plans
PHP

Inline SVG Icon Shortcode

Adds an [svg_icon] shortcode with a small built-in set of clean SVG icons, such as check, cross, star, arrow, info, warning, phone and mail, sized to match the surrounding text.

Don’t have WPIDE yet? Install it on your site

Code

add_action( 'init', function () {
    add_shortcode( 'svg_icon', function ( $atts ) {
        $atts = shortcode_atts( array( 'name' => 'check', 'color' => 'currentColor', 'size' => '1em', 'label' => '' ), $atts, 'svg_icon' );

        // 24x24 stroke icons.
        $paths = array(
            'check'   => '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
            'cross'   => '<path d="M6 6l12 12M18 6L6 18"/>',
            'star'    => '<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/>',
            'arrow'   => '<path d="M4 12h15M13 6l6 6-6 6"/>',
            'info'    => '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/>',
            'warning' => '<path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17v.5"/>',
            'phone'   => '<path d="M6.5 3.5l3 .5 1.5 4-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4 1.5.5 3c0 1-1 2-2 2A16.5 16.5 0 0 1 4.5 5.5c0-1 1-2 2-2z"/>',
            'mail'    => '<rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3.5 7l8.5 6 8.5-6"/>',
            'heart'   => '<path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/>',
            'clock'   => '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
            'pin'     => '<path d="M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/>',
            'download'=> '<path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14"/>',
        );

        $name = sanitize_key( $atts['name'] );
        if ( ! isset( $paths[ $name ] ) ) {
            return '';
        }

        $a11y = '' !== $atts['label']
            ? 'role="img" aria-label="' . esc_attr( $atts['label'] ) . '"'
            : 'aria-hidden="true" focusable="false"';

        return sprintf(
            '<svg class="wpide-icon wpide-icon-%1$s" %2$s width="%3$s" height="%3$s" viewBox="0 0 24 24" fill="none" stroke="%4$s" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-0.125em;display:inline-block">%5$s</svg>',
            esc_attr( $name ),
            $a11y,
            esc_attr( preg_replace( '/[^0-9.a-z%]/i', '', $atts['size'] ) ),
            esc_attr( $atts['color'] ),
            $paths[ $name ]
        );
    } );
} );

Notes

Example [svg_icon name="check" color="green" label="Included"]; without a label the icon is hidden from screen readers as decoration.

How to add this snippet

  1. Install WPIDE on your WordPress site (it is free) and open Code Snippets.
  2. Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
  3. It is added inactive: review the code and settings, then switch it on.

Have a snippet worth sharing?

Publish it to the library from WPIDE or right here. Sign in with any WordPress site that runs WPIDE, free or Pro. Public snippets are reviewed by the WPIDE team before they appear.

Which site should get this snippet?

Enter the address of your WordPress site. WPIDE opens there in a new tab with the snippet ready to review and save.

Remembered in this browser only, so you are asked once.

Report this snippet

Tell the WPIDE team what is wrong: broken code, something harmful, spam or copied work.