Downloads

We provide multiple options for downloading the Lightning Design System, as well as specific downloads for icons, design tokens and swatches.

Find us on GitHub

Instead of downloading the Design System you can also fork or clone it on GitHub.

Lightning Design System on GitHub

npm Package

If you use npm in your local development environment, it can be installed with the following command:

npm install @salesforce-ux/design-system --save

Lightning Design System Zip

Download the pre-built CSS framework and icons to include in your project. See the release notes for details on the latest updates.

Note: If you need to use the scoped files that were previously included in the download, we have provided a tool for you to create your custom-scoped CSS. You will need to scope to your own unique scoping class name instead of .slds.

All source code is licensed under BSD License Clause 2. All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0.

Lightning Design System Static Resource

It is no longer necessary to add a static resource for Lightning Components running within Lightning. See the FAQ for more information.

If you still need to upload the Lightning Design System as a static resource, use the following zip that will meet the static resource requirements.

Sketch UI Kit

A Sketch file of common design patterns.

Lightning Design System Unmanaged Package

The unmanaged package has been deprecated.

The Lightning Design System CSS is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application, as well as when extending the SLDS template when building a standalone Lightning Application (my.app), in LC4VF, or in a component that will be used via Lightning Out. It is no longer necessary to add a static resource for Lightning Components running within these environments. Please see the Lightning page for more information on extending the template.

There are still cases where you will need to use a static resource — specifically, within Visualforce. In this case, we have provided a tool for you to create your custom-scoped CSS.

Icons

Make sure and read the design guideline and the component blueprint for more information about design and implementation of icons.

Download all icon sets. Each icon is available as SVG and in two different PNG sizes.

All icons are licensed under Creative Commons Attribution-NoDerivatives 4.0.

Design Tokens

Design Tokens are available in multiple formats depending on which technology your application uses. For web-based applications, you can use our tokens as variables through CSS preprocessors Sass, Less, and Stylus. We recommend Sass as we use it internally, it is well-documented, and is the industry standard.

For native applications, our tokens are available in XML and JSON formats for the Android and iOS platforms, respectively.

Using Lightning Components? Read the Developer Guide on Styling with Design Tokens.

Sass

Less

Stylus

Android

iOS

Swatches

You can import color swatches for use in design applications like Photoshop and Sketch.