@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
998 lines (804 loc) • 2.25 MB
HTML
<!DOCTYPE html>
<html class="spectrum--medium">
<head>
<title>Spectrum SVG Icons - Local file</title>
<link rel="stylesheet" href="../spectrum-css/spectrum-core.css">
<link rel="stylesheet" href="../spectrum-css/spectrum-light.css">
<link rel="stylesheet" href="spectrum-icons.css">
<link rel="stylesheet" href="spectrum-icons-demo.css">
<script src="spectrum-icons-demo.js"></script>
<script src="../lib/loadIcons.js"></script>
<script>
loadIcons('../spectrum-css/icons/spectrum-css-icons.svg');
</script>
</head>
<body class="spectrum spectrum--light">
<div class="spectrum-Toast spectrum-Toast--success notification-toast" style="visibility: hidden; opacity: 0;">
<svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-SuccessMedium" />
</svg>
<div class="spectrum-Toast-content">Markup copied to clipboard!</div>
<div class="spectrum-Toast-buttons">
<button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
<svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CrossMedium" />
</svg>
</button>
</div>
</div>
<textarea class="markup-example" name="markup-example"></textarea>
<div class="icons-container">
<h2 class="spectrum-Heading--page-title">Spectrum SVG Icons</h2>
<table class="spectrum-Table icons-table">
<thead class="spectrum-Table-head">
<tr>
<th class="spectrum-Table-headCell">Icon</th>
<th class="spectrum-Table-headCell">XXS</th>
<th class="spectrum-Table-headCell">XS</th>
<th class="spectrum-Table-headCell">S</th>
<th class="spectrum-Table-headCell">M</th>
<th class="spectrum-Table-headCell">L</th>
<th class="spectrum-Table-headCell">XL</th>
<th class="spectrum-Table-headCell">XXL</th>
</tr>
</thead>
<tbody class="spectrum-Table-body">
<tr class="spectrum-Table-row" id="123">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#123">123</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-123" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="123">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-123" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="3DMaterials">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#3DMaterials">3DMaterials</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-3DMaterials" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="3DMaterials">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-3DMaterials" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="ABC">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#ABC">ABC</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-ABC" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="ABC">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-ABC" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="Actions">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#Actions">Actions</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Actions" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="Actions">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Actions" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdDisplay">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdDisplay">AdDisplay</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdDisplay" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdDisplay">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdDisplay" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdPrint">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdPrint">AdPrint</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdPrint" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdPrint">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdPrint" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="Add">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#Add">Add</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Add" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="Add">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-Add" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AddCircle">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AddCircle">AddCircle</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddCircle" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AddCircle">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddCircle" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AddTo">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AddTo">AddTo</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddTo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AddTo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddTo" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AddToSelection">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AddToSelection">AddToSelection</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddToSelection" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AddToSelection">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AddToSelection" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeAdvertisingCloud">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeAdvertisingCloud">AdobeAdvertisingCloud</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAdvertisingCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeAdvertisingCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAdvertisingCloud" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeAnalytics">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeAnalytics">AdobeAnalytics</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalytics" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeAnalytics">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalytics" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeAnalyticsCloud">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeAnalyticsCloud">AdobeAnalyticsCloud</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalyticsCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeAnalyticsCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAnalyticsCloud" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeAudienceManager">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeAudienceManager">AdobeAudienceManager</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAudienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeAudienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeAudienceManager" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeCampaign">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeCampaign">AdobeCampaign</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeCampaign" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeCampaign">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeCampaign" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeConnect">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeConnect">AdobeConnect</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeConnect" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeConnect">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeConnect" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeDocumentCloud">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeDocumentCloud">AdobeDocumentCloud</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeDocumentCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeDocumentCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeDocumentCloud" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeExperienceCloud">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeExperienceCloud">AdobeExperienceCloud</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceCloud" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceCloud">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceCloud" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeExperienceManager">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeExperienceManager">AdobeExperienceManager</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceManager" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeExperienceManager">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeExperienceManager" />
</svg>
</td>
</tr>
<tr class="spectrum-Table-row" id="AdobeLogo">
<td class="spectrum-Table-cell"><a class="spectrum-Link" href="#AdobeLogo">AdobeLogo</a></td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXS" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-18-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeLogo" />
</svg>
</td>
<td class="spectrum-Table-cell js-iconExample">
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
<use xlink:href="spectrum-icons.svg#spectrum-icon-24-AdobeLogo" />
</svg>
</td>