You can say how to use SVG in inline form which is the easiest way. Just add the above code by changing the fill property to the desired color.

Exemplifying:

svg:hover path {
  fill: #fce57e;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path fill="#8bcafe" d="M27.563 0.172q0.516 0.375 0.422 1l-4 24q-0.078 0.453-0.5 0.703-0.219 0.125-0.484 0.125-0.172 0-0.375-0.078l-7.078-2.891-3.781 4.609q-0.281 0.359-0.766 0.359-0.203 0-0.344-0.063-0.297-0.109-0.477-0.367t-0.18-0.57v-5.453l13.5-16.547-16.703 14.453-6.172-2.531q-0.578-0.219-0.625-0.859-0.031-0.625 0.5-0.922l26-15q0.234-0.141 0.5-0.141 0.313 0 0.562 0.172z"></path>
</svg>

The form I found and most recommended was using this code from SNIPPETLIB : Replace all SVG images with inline SVG

  

Currently there is an easy way to embed an SVG image and then access the SVG elements via CSS. There are several methods of using JS SVG frameworks, but they are overly complicated if all you do is making a simple icon with a rollover state.   This replaces all SVG images with inline SVGs so you can style them with css.

Basically what it does is replace all the images of your site with SVG INLINE allowing you to access its properties via CSS.

In your case you can insert the image into the body of your document like this:

<img id="airplane" class="svg airplane" src="airplane.svg">

OBS: You need to include the SVG class while AIRPLANE is for the example. ID is not required, but can be useful according to your needs.

Next, apply the jQuery code (in a separate file or in the header HEAD of your page).

NOTE: Do not forget to include jQuery in HEAD of the page.

/*  Replace all SVG images with inline SVG */
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

$.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
        $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http://validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

The code gets all IMG tags with class SVG and replaces it with SVG INLINE from the linked file in the SRC attribute.

Once you have done this, you have access to SVG properties from CSS, allowing you to change the color of the CSS.

As mentioned:

svg:hover path {
    fill: #fce57e;
}

By ID :

#airplane:hover path {
    fill: #fce57e;
}

By class:

.airplane:hover path {
    fill: #fce57e;
}

Example online: Example Hover SVG

Problem example in JSBIN : Hover Example Does Not Work >

If there are only a few icons, there is a problem, you put the CSS style inside the SVG file and remove fill

 <style
     id="style4487">
     .class1 {

   fill: #ff9900;
}
.class1:hover {

   fill: #ff0000;
}</style>