Included CSS Rules
Because we're using the svg use tag, we have a few fancy CSS classes applied to each of our icons to help styling behave as you would expect. We use the currentColor variable in CSS to control the color of the stroke and fill, and most icons have stroke set to inherit so that by setting a stroke-width on the outer svg element (with the classes above) that will cascade to all of the strokes in that icon (for sets where this is available).
To be more exact, all of our icons currently start with this default styling:
.glyph{ fill:currentColor; display:inline-block; margin-left:auto; margin-right:auto; position:relative; text-align:center; vertical-align:middle; width:70%; height:70%; } .glyph.sm{width:30%;height:30%;} .glyph.md{width:50%;height:50%;} .glyph.lg{height:100%;width:100%;} .glyph-svg{width:100%;height:100%;} .glyph-svg .fill{fill:inherit;} .glyph-svg .line{stroke:currentColor;stroke-width:inherit;}
Please note that this default styling may change during our beta period, which may affect the styling of icons on your site.
When you add a Glyphs.co icon to your site, it will automatically be sized at 70% the height and width of its container. There are some classes we've built-in to change that default size: sm, md, lg. Adding one of those three classes to the SVG class of your icons will change its size to be 30%, 50% or 100% respectively. If you want a different size, you can specify so in your own CSS file.