Design Elements
Iconography
Icons are a simple and effective way to visualize ideas, actions or objects in our brand communication. They allow us to call attention to information or to provide context to it. Clemson’s standard iconography set is Line Awesome, a free icon kit available through Icons8.
Line Awesome Icon Kit
Iconography on the Web
The Clemson.edu web template uses icons for various modules and widgets, which include icon cards and buttons. These modules are prebuilt into the Cascade templates. The Web modules page contains code snippets and more details about using icons throughout your site.
Icon Card Widgets
Image Buttons with Icons
The Cascade template also includes a set of available custom icons, shown below. Please note that the Tiger Paw icon should not be used in a situation that will allow it to be any color other than orange or white. Each name denotes the css class to input in the appropriate area of the cascade template, along with the class "clemson-icon" separated by a space. For non-cascade use, the svg and png files for each icon are available to download.
Download Custom Icon SVG Files (ZIP)Custom Icons
Not every situation will have the perfect icon. When necessary, create your own icons, ensuring that the style matches the characteristics of the Line Awesome icon kit:
-
Sharp/squared angles instead of rounded.
-
Consistent, thick line weight.
-
Relatively square in form.
When creating a new icon, start with a 32px grid with a 2px margin. Draw your new icon using vector shapes and lines. All stroke weights should be 2px in thickness. When ready, output your icon as an SVG or PNG, and use the 2x/3x export scaler to create larger versions if needed.