To Do

You can take SVG code, for example, of an existing icon and change it according to your needs.

Dog Icon

In the first selection you see the dog icon. Try to change the SVG code and see what you get.

Try the following, define id="eye" for an eye. Then define the following animation:

<style>
#eye { animation: rotate 2s linear infinite; }

@keyframes rotate {
    from {
        transform: rotate(0deg) translate(3px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(3px) rotate(-360deg);
    }
} /* end of keyframes - don't remove this line */
</style>

Symbol

In the 'symbol' selection you have an arrow symbol. You can use it as many times you want. You can define the symbol also in the separate SVG.

See how the symbol is located. Play with the location, width and height.

change the default uniform scaling aspect ratio of the symbols to:

<symbol viewBox="0 0 52 52" id="arrow" preserveAspectRatio="none">

What happens to the icons?

Some Presentation Attributes

stroke, stroke-width, stroke-opacity, stroke-dasharray (separated by coma), stroke-dashoffset

stroke-linecap (butt/round/square)

stroke-linejoin (miter/round/bevel)

opacity (0 - 1)

fill, fill-opacity

Text Alignment

The following shows the possible values of text-anchor and alignment-baseline text attributes to align the text.