Getting Started with Spark Icons

The Spark Design System supports two methods for including SVG icons. Icons can either be built into your site at compile time or dynamically loaded at run time. Each method has advantages and disadvantages, detailed below.

For more information on working with SVG icons, check out this guide.

At Compile Time

This method involves downloading the latest SVG from the correct CDN URL as part of your build/development process, and then embedding that SVG directly into your compiled site. This way, all the SVGs are already included in your site when the page loads and an additional request is not necessary. All the load time for downloading the SVG from the CDN takes place during development, not while the user is using the page.

The big advantage of this method is performance and reliability. Since the SVG has already been downloaded as part of the build process, the user does not need to wait for the CDN to serve the SVG. That makes this method ideal for production environments where load times are critical.

This method also gives development teams more control over which SVGs are included in the site. Since the SVG file is downloaded during development, developers can review the SVG file before publishing, and can include only the SVG versions they’ve tested.

The downside of this method is more development work up front setting up the build and maintaining the connection to the CDN over the long term.

Note: If you use this method you must not put the SVG file in your source control repository. The SVG file should only be hosted on the official CDN.

Examples

At Run Time

Using this method, the full SVG including the entire icon set is injected into your site as a separate HTTP request while the page is loading. This is typically done with an AJAX request that executes on page load. The full SVG containing all the icons is embedded at the top of the page so that they are available to be used in the body of the page.

The big downside of this method is performance. You can easily end up downloading the icons more than once on subsequent page loads (making the user wait for multiple downloads), and even if you’re only downloading them once, the user still needs to wait for that download to complete separate from the main site download, during which time the page has loaded but the icons are not visible.

The big advantage of this method is that it requires the least amount of setup and additional tooling. This makes it ideal for quick, non-production projects.

Another potential side-effect of this method is that if the SVG file on the CDN changes, you’ll get the update immediately without a chance for review.

Examples

Tips

  • The Icon SVG must be included in the page before the first icon is used, typically at the top of the page, directly after the <body> element.
  • To use your own icon set with the Spark components, you must make sure your icons have the exact same names as the icons listed here.
  • For internal users, you can access a directory of our CDN resources here.