This is a simple HTML page with few icons.
There are 2 entries for each sample: one as inline SVG, one using style.

Icons that behave like images:

Icon that behaves like an glyph (aligned to bottom of this text):

Changing icon color:

Big icon (showing various ways to do it):
Icons above should be aligned differently because they have different font-size. Vertical alignment is relative to font size.

Big icon (showing various ways to do it):
Icons above should be aligned identically because they are not using inline mode.

Rotation:

Flip (4 icons, repeated 3 times with different mode attribute):

Non-square animated icon (with border):

Making icon square with attributes (with border):

Making icon square with style (with border):

Hidden icons, appear on scroll

Scale icon

Using height="none" and CSS, animating width/height and color