Icon Usage

How to add and use icons in your project

A library of icons are included within the Syracuse University Digital Design System. These icons were created to be consistent with Syracuse University branding, are intended to be used as enhancements to your user interface, and to improve the user experience of your site or application.

Take care when using icons that they are tested for accessibility. Icons should be used to improve communication and give directional cues to the user. Instances where only the icon is shown visually, proper labeling for screen readers should be applied.

How to Use

If you are using the minified css version of the DDS, such as latest or a specific release number, you will need to import the icon font into either a style tag or into a separate css file.

If you are installing the DDS via npm install or are using the entire DDS project in your own project, you will not need to import the icon font as it is already available to you once you have updated to the newest release.

Below is the css markup used to import the icon font.

@font-face {
  font-family: 'orange-icons';
  src:  url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.eot');
  src:  url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.eot#iefix') format('embedded-opentype'),
        url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.ttf') format('truetype'),
        url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.woff') format('woff'),
        url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Once the the font is imported, you are then able to add the icon to your html. The icon is added by simply using the appropriate class name for the font to an <i> or <span> tag.

The size of the icon will inherit its size from either the base body size of 16px or from a parent element. The size of the font can be modified using text size utilities.

All the icons currently available and their class names can be found in the Icon Library

Icon Requests

The current library of icons is now rather limited, but this list will be continually updated. If there is a need for an icon that does not currently exist, please place a request for the icon as an issue in Gitlab.