Snippet: Define Your Own Icons or Modify the Theme Icons

  • Updated:
Important: The theme uses certain icons throughout the design, primarily arrows and close icons. If you create your own icons list, make sure you include these core icons or they won't display on the site.

The Total theme registers all its icons in a JSON file using the format icon_name => svg. By default, this file is located at Total/assets/icons/list.json. While you can edit this file directly, your changes will be lost when the theme is updated.

To safely customize your icons, you can define your own JSON file in your child theme. This allows you to include only the icons you need or override specific ones from the theme.

To do this, add the following code to your child theme’s functions.php file then place your custom site-icons.json file in the root of your child theme. We recommend starting with a copy of the original list.json file from the parent theme and then making your changes.

// Override theme icons JSON URI to point to your child theme's site-icons.json
add_filter( 'parent_theme_file_uri', function( $uri, $file ) {
	if ( $file === 'assets/icons/list.json' ) {
		return get_stylesheet_directory_uri() . '/site-icons.json';
	}
	return $uri;
}, 10, 2 );

// Override theme icons JSON path to point to your child theme's site-icons.json
add_filter( 'parent_theme_file_path', function( $path, $file ) {
	if ( $file === 'assets/icons/list.json' ) {
		return get_stylesheet_directory() . '/site-icons.json';
	}
	return $path;
}, 10, 2 );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top