• Icons
  • Photos
  • Docs
  • Signup
  • Login
  • Create an Account
  • Getting Started
    • Installation
    • Using the Glyphs App
    • Using Glyphs on Your Site
    • Styling with CSS
  • Reference
    • How Glyphs Works
    • Included CSS Rules
  • Photos - Introduction
    • All about the Photos JS file
    • How to Search for Photos
    • How to Use a Specific Photo
    • How to Edit a Photo
  • Terms of Use
  • License
    • Terms of Use
    • License

Styling with CSS

For each instance of an individual SVG icon we're going to have an svg tag and a use tag. It should look like this:

<code><svg class="glyph signia paper-plane"><use xlink:href="#signia-paper-plane"></use></svg></code>

With the main Glyphs.co script installed in your header, the above tag will have the SVG data replicated into it and the end result will be something like this:

Take note that there are 3 classes assigned to the SVG. The glyph class applies to all of the icons, with some basic styling for size, positioning, layout, etc. The second class is the icon set class. For this paper plane icon, its icon set class is signia. The last class is the individual icon class: paper-plane.

You can use the individual icon class (paper-plane in the example) to select and style specific icons, the set class (signia to style an entire set, the glyph class to specify all Glyphs.co icons or any combination of those classes to hit a specific icon if you have a lot of similar icons.

The Base CSS

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.

Basic CSS Color Options

There are a few basic CSS properties that will enable you to quickly and effectively style your SVGs for your site. These properties are fill, stroke, and stroke-width. Not all of our icons sets can use these properties. Our pre-colored icon sets, for example, have the color and stroke styling built-in to each SVG, so you won't be able to adjust them in the CSS like this. To see what options are available for an icon set or an individual icon, view the Icon set or Icon Details. (in the sidebar). For example: https://glyphs.co/icons/signia or https://glyphs.co/icons/signia-grab-tool.

If the icons you choose allow for color changes, you can use the fill, stroke, and stroke-width properties to style your icons like this:

.glyph.signia.paper-plane{
    fill:#FF0066;
    stroke:#000000;
    stroke-width:1%;
}

Which looks like this:


← Using Glyphs on Your Site Reference →

Copyright © 2015 Glyphs Co. Terms of Use | Privacy Policy | License

Login

Forget your password?

Remember me?


You don't have an account? Create one!

Want to try Glyphs.co?

You'll be able to create your own kits and start using Glyphs.co on your site soon, but you need to sign up first.

Already have an account? Login

Enter your name and
set a password:

Please enter your name

Help T-Rex tell his friends

Eric's arms are too short to reach his laptop; can you help him tell people about Glyphs Company? If you get one friend to sign up he'll give you a free month of GlyphsCo premium. Get three friends: early access. Get seven friends? He'll send you an awesome t-rex-shirt.

1 Free MonthEarly AccessFree Gift

Sign up1 Friend3 Friends7 Friends

Use these links to share:

Share via Email

Please enter your friends' email addresses below. Use a comma to separate more than one email.


Change your mind? Go back →

Thanks for sharing!

You've successfully shared Glyphs Company with your friends. Thanks for helping T-Rex get the word out.

Upgrade to a Premium Account

Go pro for $10/month with 100,000 pageviews included.
(additional pageviews are $1 per 10,000.)

$10/month

PRO ACCOUNT INCLUDES

  • Access to premium icons and photos
  • No attribution required
  • Instant photo embedding and resizing
  • 100,000 photo embed views
  • Unlimited icon embeds

Billing Name

Payment Info

We accept Visa, MasterCard, American Express, JCB, Discover, and Diners Club. Payments via Stripe.
Don't worry, your billing information is secure. We use Stripe for payments and we stand by our products with a 30-day Guarantee.

Processing payment...

FAQs

When should I get a premium account?

You should get a premium account if you want more of our icons and photos (we have a lot of premium content) or if you want to use them without attribution. Our photo embed links and live-editor are also premium only.

Can I embed your photos and icons on a production site?

Yes! Both our icons and photo embeds are served quickly, compatibly, and through a highly-available CDN. These links are designed to be used in production on sites with a lot of traffic. This is also a premium-only feature.

What are photo views and how are they billed?

We have a metered pricing structure for photo embedding. 100,000 views are included in the base $10 plan (we only count one view per page, no matter how many images you use). If you go over 100,000 pageviews, we charge $1 for every extra 10,000 pageviews. If you have a high traffic website you can contact us for better pricing.

Can I use Glyphs in a theme/software I'm reselling?

We do allow using our icons and photos in third-party applications but we require a special developer account for that and there are certain licensing restrictions. Contact us and we'll get you all set up for this.