# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: shortcodes, icons, svg
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/inline-icon-shortcode/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Inline SVG Icon Shortcode" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/