Title: Issues when adding a new icon
Last modified: January 6, 2017

---

# Issues when adding a new icon

 *  [Ameya Barve](https://wordpress.org/support/users/ameyabarve/)
 * (@ameyabarve)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/issues-when-adding-a-new-icon/)
 * I’m trying to add a custom icon for Strava to the Simple Social Icons. I have
   a relatively new install of WordPress 4.7, with Simple Social Icons v2.0.1.
 * I’m attempting to follow instructions [as posted](https://github.com/copyblogger/simple-social-icons/wiki/Add-an-additional-icon-in-version-2.0);
   here’s what I did:
 * (1) First I copy-pasted facebook.svg as strava.svg in the simple-social-icons/
   icons/SVG folder just so I would have a new SVG file. I then edited the new strava.
   svg XML to add the id and to match the Xml in the instructions so it now looks
   like 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-strava" viewBox="0 0 32 32">
                   <title>Strava</title>
                   <path d="M23.738.214v4.714h-2.804c-1.023 0-1.714.214-2.071.643s-.536 1.071-.536 1.929v3.375h5.232l-.696 5.286h-4.536v13.554h-5.464V16.161H8.309v-5.286h4.554V6.982c0-2.214.62-3.932 1.857-5.152S17.607 0 19.666 0c1.75 0 3.107.071 4.071.214z"/>
               </symbol>
           </defs>
       </svg>
       ```
   
 * (2) Then, I added the following code to my functions.php:
 *     ```
       //* Add Strava Simple Social Icons widget
       add_filter( 'simple_social_default_profiles', 'add_strava_simple_icon' );
       function add_strava_simple_icon( $icons ) {
           $icons['strava-icon'] = [
               'label'   => __( 'Strava URI', 'simple-social-icons' ),
               'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#social-strava' ) . '"></use></svg></a></li>', 
          ];
           return $icons;
       }
       ```
   
 * This seems to work partly, as I do see a new entry for Strava in the widget where
   I can enter the Strava URI, however, the image on the published website that 
   shows up is plain black, and not the facebook SVG I copy-pasted. Is there another
   place where I need to upload/create an icon?
 * I am using the Genesis framework with the eleven40 theme. I have published the
   widget changes to my [website](http://ameya.net) to show the actual behavior.
 * Thanks
    Ameya

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Contributor [Nick C](https://wordpress.org/support/users/modernnerd/)
 * (@modernnerd)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/issues-when-adding-a-new-icon/#post-8630052)
 * Hi, [@ameyabarve](https://wordpress.org/support/users/ameyabarve/)
 * The path to your new strava.svg file appears to be incorrect.
 * Your site is returning a 404 for a file named ‘my.svg’ at this location (note
   wp-content appears twice and file is named my.svg rather than strava.svg):
 * – [http://ameya.net/wp-content/plugins/home4/ameyabarve/public_html/wp-content/themes/eleven40-pro/my.svg#social-strava](http://ameya.net/wp-content/plugins/home4/ameyabarve/public_html/wp-content/themes/eleven40-pro/my.svg#social-strava)
 * If your strava.svg file is in the Simple Social Icons plugin directory root, 
   you could use the correct path in place of `esc_url(…)` in functions.php:
 * `'http://ameya.net/wp-content/plugins/simple-social-icons/strava.svg#social-strava'`
 * If instead the file is in your theme directory, you can use `get_stylesheet_directory_uri()`
   instead:
 * `esc_url( get_stylesheet_directory_uri() . '/strava.svg#social-strava' )`
 * Or the bare link to the file:
 * `'http://ameya.net/wp-content/themes/eleven40-pro/strava.svg#social-strava'`
 * (I couldn’t see a strava.svg file at either location, so you’ll need to adjust
   the above with the correct path or move the file.)
 * Either way I recommend checking where the file is located, then making sure the
   path in your functions.php matches. Your browser’s console will show warnings
   whenever the path is wrong:
 * ![console warnings for missing svg file](http://d.pr/i/WycC+)
    -  This reply was modified 9 years, 4 months ago by [Nick C](https://wordpress.org/support/users/modernnerd/).
 *  Thread Starter [Ameya Barve](https://wordpress.org/support/users/ameyabarve/)
 * (@ameyabarve)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/issues-when-adding-a-new-icon/#post-8630441)
 * Hi Nick,
 * Thanks for the detailed explanation. I copied the strava.svg file to the plugin
   root folder and the following code worked:
 *     ```
       //* Add Strava Simple Social Icons widget
       add_filter( 'simple_social_default_profiles', 'ameya_add_strava_simple_icon' );
       function ameya_add_strava_simple_icon( $icons ) {
           $icons['strava-icon'] = [
               'label'   => __( 'Strava URI', 'simple-social-icons' ),
               'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'strava.svg#social-strava' ) . '"></use></svg></a></li>', 
          ];
           return $icons;
       }
       ```
   
 * Curiously if I copy the strava.svg to the “wp-content/plugins/simple-social-icons/
   icons/SVG/” folder, then neither using “esc_url( plugin_dir_url(__FILE__) . ‘
   icons/SVG/strava.svg#social-strava'” or even a direct link to that location seemed
   to work.
 * Also, I’m new to customizing plugins, so what would you say is the recommended
   best practice as to where I should keep the strava.svg file? Should I keep it
   in the Simple Social Icons plugin root folder (as it is now) or would you recommend
   I move it someplace else?
 * Ameya

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Issues when adding a new icon’ is closed to new replies.

 * ![](https://ps.w.org/simple-social-icons/assets/icon.svg?rev=3358424)
 * [Simple Social Icons](https://wordpress.org/plugins/simple-social-icons/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/simple-social-icons/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/simple-social-icons/)
 * [Active Topics](https://wordpress.org/support/plugin/simple-social-icons/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/simple-social-icons/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/simple-social-icons/reviews/)

## Tags

 * [strava](https://wordpress.org/support/topic-tag/strava/)

 * 2 replies
 * 2 participants
 * Last reply from: [Ameya Barve](https://wordpress.org/support/users/ameyabarve/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/issues-when-adding-a-new-icon/#post-8630441)
 * Status: not resolved