wp_get_icon() │ WP 7.1.0

Gets the HTML of a registered SVG icon.

The icon must first be registered with wp_register_icon().

A11y: When an accessible label is specified, the icon receives role="img" and aria-label attributes. Without a label, the icon is considered decorative and is hidden from screen readers.

1 time — 0.0006881 sec (slow) | 50000 times — 2.02 sec (fast) | PHP 8.2.28, WP 7.1

No Hooks.

Returns

String.

  • string - SVG icon HTML.
  • '' - if the icon is not registered, its content is empty, or the <svg> tag is not found.

Usage

wp_get_icon( $name, $args );
$name(string) (required)
The full icon name in collection/icon format. For example: core/plus, core/arrow-down, my-plugin/custom-icon.
$args(array)

Icon display parameters.

Default: []

  • size(int|null)
    The icon width and height in pixels. null preserves the original SVG dimensions.
    Default: 24

  • class(string)
    Additional CSS classes for the <svg> tag. Separate multiple classes with spaces.
    Default: ''

  • label(string)
    The accessible icon label.

    When specified, the <svg> tag receives role="img" and aria-label. The aria-hidden and focusable attributes are removed.

    When not specified, the function adds aria-hidden="true" and focusable="false", and removes role and aria-label.
    Default: ''

Examples

#1 Displaying a decorative icon

Display a built-in 24-pixel icon. It will be hidden from screen readers.

echo wp_get_icon( 'core/plus' );

Result:

<svg aria-hidden="true" focusable="false" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
	<path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" />
</svg>

#2 An icon with a label and CSS class

Display a 32-pixel icon with an accessible label.

echo wp_get_icon( 'core/plus', [
	'size'  => 32,
	'class' => 'button-icon',
	'label' => __( 'Add item', 'my-plugin' ),
] );

To make an individual icon inherit the text color, set fill: currentColor:

.button-icon {
	fill: currentColor;
}

Changelog

Since 7.1.0 Introduced.

wp_get_icon() code WP 7.1

wp-includes/icons.php 
function wp_get_icon( $name, $args = array() ) {
	$icon = WP_Icons_Registry::get_instance()->get_registered_icon( $name );
	if ( is_null( $icon ) ) {
		return '';
	}

	$svg = $icon['content'];
	if ( empty( $svg ) ) {
		return '';
	}

	$args = wp_parse_args(
		$args,
		array(
			'size'  => 24,
			'class' => '',
			'label' => '',
		)
	);

	$processor = new WP_HTML_Tag_Processor( $svg );
	if ( ! $processor->next_tag( 'svg' ) ) {
		return '';
	}

	if ( is_numeric( $args['size'] ) ) {
		$size = absint( $args['size'] );
		$processor->set_attribute( 'width', (string) $size );
		$processor->set_attribute( 'height', (string) $size );
	}

	if ( ! empty( $args['class'] ) ) {
		foreach ( preg_split( '/\s+/', $args['class'], -1, PREG_SPLIT_NO_EMPTY ) as $class_name ) {
			$processor->add_class( $class_name );
		}
	}

	if ( ! empty( $args['label'] ) ) {
		$processor->set_attribute( 'role', 'img' );
		$processor->set_attribute( 'aria-label', $args['label'] );
		$processor->remove_attribute( 'aria-hidden' );
		$processor->remove_attribute( 'focusable' );
	} else {
		$processor->set_attribute( 'aria-hidden', 'true' );
		$processor->set_attribute( 'focusable', 'false' );
		$processor->remove_attribute( 'role' );
		$processor->remove_attribute( 'aria-label' );
	}

	return $processor->get_updated_html();
}

icon (svg)

Block Editor (Gutenberg)