Add an additional icon in version 2.0

A working sample plugin that shows how to add icons is available here:

https://github.com/nickcernis/ssi-custom-icons

---

To add an additional SVG icon in Simple Social Icons 2.0+, you can use this code:

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

function custom_add_new_simple_icon( $icons ) {
	$icons['my-new-icon'] = [
		'label'   => __( 'My New Icon URI', 'simple-social-icons' ),
		'pattern' => '<li class="social-my-new-icon"><a href="%s" %s><svg role="img" class="social-my-new-icon-svg" aria-labelledby="social-my-new-icon"><title id="social-my-new-icon">' . __( 'My new icon', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#social-my-new-icon' ) . '"></use></svg></a></li>',
	];

	return $icons;
}

add_filter( 'simple_social_default_styles', 'custom_add_new_icon_default' );

function custom_add_new_icon_default( $defaults ) {
	$defaults['my-new-icon'] = '';

	return $defaults;
}

You'll need to update:

• 'My New Icon URI' to the label you would like to use in the widget settings.
• 'social-my-new-icon' to the class you want to use to identify the SVG (it should begin social-).
• 'My new icon' to the screen reader text to use.
• plugin_dir_url(__FILE__) . 'my.svg#social-my-icon to the path of your SVG file, where social-my-icon is the ID of the icon in the SVG file, as shown below. (If you're adding this code to your child theme and not to a site-specific plugin, you'll need to replace plugin_dir_url with get_stylesheet_directory_uri.)

SVG file format

The above assumes an SVG file format such as this:

<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <defs>
        <symbol id="social-my-icon" viewBox="0 0 32 32">
            <title>My new icon</title>
            <path d="M24,21.714c0.953,0 1.762,0.333 2.429,1c0.667,0.667 1,1.476 1,2.429c0,0.953 -0.333,1.762 -1,2.429c-0.667,0.667 -1.476,1 -2.429,1c-0.953,0 -1.762,-0.333 -2.429,-1c-0.667,-0.667 -1,-1.476 -1,-2.429c0,-0.953 0.333,-1.762 1,-2.429c0.667,-0.667 1.476,-1 2.429,-1ZM26.196,12.571c0.333,-0.024 0.619,0.077 0.857,0.304c0.25,0.214 0.375,0.494 0.375,0.839l0,2.411c0,0.297 -0.098,0.553 -0.295,0.768c-0.197,0.215 -0.444,0.334 -0.741,0.357c-2.726,0.262 -5.056,1.36 -6.991,3.295c-1.935,1.935 -3.033,4.265 -3.295,6.991c-0.024,0.297 -0.143,0.544 -0.357,0.741c-0.214,0.197 -0.47,0.295 -0.768,0.295l-2.411,0c-0.345,0 -0.625,-0.125 -0.839,-0.375c-0.203,-0.203 -0.304,-0.459 -0.304,-0.768l0,-0.089c0.155,-1.905 0.634,-3.726 1.438,-5.464c0.804,-1.738 1.884,-3.28 3.241,-4.625c1.345,-1.357 2.887,-2.438 4.625,-3.241c1.738,-0.803 3.559,-1.283 5.464,-1.438l0.001,-0.001ZM26.232,3.429c0.321,-0.024 0.601,0.083 0.839,0.321c0.238,0.214 0.357,0.488 0.357,0.821l0,2.554c0,0.309 -0.104,0.574 -0.313,0.795c-0.209,0.221 -0.462,0.337 -0.759,0.348c-2.559,0.143 -4.991,0.744 -7.295,1.804c-2.304,1.06 -4.304,2.438 -6,4.134c-1.696,1.696 -3.074,3.696 -4.134,6c-1.06,2.304 -1.667,4.736 -1.821,7.295c-0.012,0.297 -0.128,0.55 -0.348,0.759c-0.22,0.209 -0.479,0.313 -0.777,0.313l-2.554,0c-0.333,0 -0.607,-0.119 -0.821,-0.357c-0.214,-0.214 -0.321,-0.476 -0.321,-0.786l0,-0.054c0.155,-3.119 0.869,-6.104 2.143,-8.955c1.274,-2.851 3.024,-5.383 5.25,-7.598c2.214,-2.226 4.747,-3.976 7.598,-5.25c2.851,-1.274 5.836,-1.988 8.955,-2.143l0.001,-0.001Z" />
        </symbol>
    </defs>
</svg>

If your icon doesn't take the default colour of the rest of the icons, make sure the path element in your SVG file does not contain inline styles.