Define Your Own Icons or Modify the Theme Icons

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 snippet to your child theme’s functions.php file then place a 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 );

Elementor Notice

Unfortunately, you will not be able to use your custom icons in Elementor due to it’s own limitations.

Removing Icons

Any icon used by the theme’s design or selected in an element that isn’t in your file will fall back to the parent theme’s version. To prevent an icon from displaying, add it to your file with an empty value, for example "calendar-o": "".