GarthDB/css.md

Last active April 20, 2023 20:06

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/GarthDB/ee9a9dde226ae0603c1226c518962931.js"></script>
Save GarthDB/ee9a9dde226ae0603c1226c518962931 to your computer and use it in GitHub Desktop.

Download ZIP

This is a collection of icons used in the docs for the Spectrum CSS project.

Raw

css.md

Component: accordion

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#16 #27 #36 #45	Yes

Component: actionbar

Icon	Line links	Required
`spectrum-css-icon-Arrow100`	#270 #276	Yes
`spectrum-css-icon-Checkmark100`	#259 #288 #303 #318 #333 #348 #363 #378 #393 #408	Yes
`spectrum-css-icon-Cross100`	#38 #63 #97 #132 #157 #191 #226 #422	Yes
`spectrum-css-icon-Dash100`	#262	Yes
`spectrum-icon-18-Copy`	#78 #111 #172 #205 #437	?
`spectrum-icon-18-Delete`	#84 #116 #178 #210 #443	?
`spectrum-icon-18-Edit`	#72 #106 #166 #200 #235 #431	?
`spectrum-icon-18-More`	#240	Yes

Component: actionbutton

Icon	Line links	Required
`spectrum-css-icon-CornerTriangle100`	#140 #241 #272 #303 #334 #372 #403 #434 #465 #503 #534 #565 #596 #633 #664 #695 #726 #764 #795 #826 #857 #896 #927 #958 #989 #1029 #1060 #1091 #1122 #1161 #1192 #1223 #1254	Yes
`spectrum-css-icon-CornerTriangle200`	#172	Yes
`spectrum-css-icon-CornerTriangle300`	#204	Yes
`spectrum-css-icon-CornerTriangle75`	#78 #109	Yes
`spectrum-icon-18-Edit`	#65 #72 #81 #96 #103 #112 #127 #134 #143 #159 #166 #175 #191 #198 #207 #228 #235 #244 #259 #266 #275 #290 #297 #306 #321 #328 #337 #359 #366 #375 #390 #397 #406 #421 #428 #437 #452 #459 #468 #490 #497 #506 #521 #528 #537 #552 #559 #568 #583 #590 #599 #620 #627 #636 #651 #658 #667 #682 #689 #698 #713 #720 #729 #751 #758 #767 #782 #789 #798 #813 #820 #829 #844 #851 #860 #883 #890 #899 #914 #921 #930 #945 #952 #961 #976 #983 #992 #1016 #1023 #1032 #1047 #1054 #1063 #1078 #1085 #1094 #1109 #1116 #1125 #1148 #1155 #1164 #1179 #1186 #1195 #1210 #1217 #1226 #1241 #1248 #1257	?

Component: actiongroup

Icon	Line links	Required
`spectrum-icon-18-AlignBottom`	#255 #272 #293	?
`spectrum-icon-18-AlignMiddle`	#277 #298	?
`spectrum-icon-18-AlignTop`	#249 #267 #288	?
`spectrum-icon-18-Copy`	#41 #62 #98 #119 #155 #176 #212 #233	?
`spectrum-icon-18-Delete`	#46 #67 #103 #124 #160 #181 #217 #238	?
`spectrum-icon-18-Edit`	#36 #57 #93 #114 #150 #171 #207 #228	?

Component: actionmenu

Icon	Line links	Required
`spectrum-icon-18-More`	#17 #44 #70	Yes

Component: assetcard

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#26 #56 #86 #115 #162	Yes
`spectrum-css-icon-Dash100`	#29 #59 #89 #118 #165	Yes

Component: assetlist

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#14 #29 #46	Yes
`spectrum-css-icon-Chevron100`	#21 #38 #55	Yes
`spectrum-icon-18-Document`	#34	Yes
`spectrum-icon-24-Folder`	#51	?

Component: badge

Icon	Line links	Required
`spectrum-icon-18-Info`	#83 #89 #95 #101 #114 #121 #128 #135 #146 #162 #173 #184 #195 #213 #225	Yes

Component: breadcrumb

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#21 #27 #44 #50 #71 #77 #83 #100 #110 #116 #133 #139 #156 #162 #183 #189 #195 #212 #222 #228 #245 #251 #272 #278 #284 #301 #311 #317 #334 #340 #353 #363 #369	Yes
`spectrum-icon-18-FolderOpen`	#67 #106 #179 #218 #268 #307 #359	Yes

Component: button

Icon	Line links	Required
`spectrum-icon-18-Delete`	#47 #54 #67 #74 #88 #95 #109 #116 #131 #138 #155 #162 #175 #182 #196 #203 #217 #224 #239 #246	?
`spectrum-icon-18-Edit`	#48 #55 #68 #75 #89 #96 #110 #117 #134 #141 #156 #163 #182 #189 #202 #209 #223 #230 #244 #251 #268 #275 #290 #297 #316 #323 #336 #343 #357 #364 #378 #385 #402 #409 #424 #431 #450 #457 #470 #477 #491 #498 #512 #519 #536 #543 #558 #565 #47 #54 #67 #74 #88 #95 #109 #116 #131 #138 #155 #162 #175 #182 #196 #203 #217 #224 #239 #246 #47 #54 #67 #74 #88 #95 #109 #116 #131 #138 #155 #162 #175 #182 #196 #203 #217 #224 #239 #246 #33 #40 #53 #60 #74 #81 #95 #102 #119 #126 #145 #152 #165 #172 #186 #193 #207 #214 #231 #238	?

Component: calendar

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#16 #21 #106 #111 #199 #204 #288 #293 #381 #386	Yes

Component: card

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#46 #87 #132 #169 #206 #239 #303 #346 #46 #35	Yes
`spectrum-css-icon-Dash100`	#49 #90 #135 #172 #209 #242 #306 #349 #49 #38	Yes
`spectrum-icon-18-Document`	#257	Yes
`spectrum-icon-18-More`	#29 #70 #116 #293 #336 #34	Yes

Component: checkbox

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#34 #49 #64 #80 #95 #110 #127 #142 #157 #174 #189 #204 #226 #241 #256 #272 #287 #302 #319 #334 #349 #366 #381 #396 #512 #527 #542 #610	Yes
`spectrum-css-icon-Checkmark200`	#562 #577 #592	Yes
`spectrum-css-icon-Checkmark50`	#417 #432 #447	Yes
`spectrum-css-icon-Checkmark75`	#464 #479 #494	Yes
`spectrum-css-icon-Dash100`	#37 #52 #67 #83 #98 #113 #130 #145 #160 #177 #192 #207 #229 #244 #259 #275 #290 #305 #322 #337 #352 #369 #384 #399 #515 #530 #545 #613	Yes
`spectrum-css-icon-Dash200`	#565 #580 #595	Yes
`spectrum-css-icon-Dash50`	#420 #435 #450	Yes
`spectrum-css-icon-Dash75`	#467 #482 #497	Yes

Component: clearbutton

Icon	Line links	Required
`spectrum-css-icon-Cross100`	#42 #78 #89	Yes
`spectrum-css-icon-Cross200`	#54	Yes
`spectrum-css-icon-Cross300`	#66	Yes
`spectrum-css-icon-Cross75`	#31	Yes

Component: closebutton

Icon	Line links	Required
`spectrum-css-icon-Cross100`	#40	Yes
`spectrum-css-icon-Cross200`	#52 #89	Yes
`spectrum-css-icon-Cross300`	#64 #100 #136 #151 #162 #181 #192	Yes
`spectrum-css-icon-Cross400`	#112	Yes
`spectrum-css-icon-Cross500`	#124	Yes
`spectrum-css-icon-Cross75`	#29	Yes

Component: combobox

Icon	Line links	Required
`spectrum-css-icon-Chevron200`	#63 #84 #103 #122 #165 #186 #205 #224 #270 #292 #333 #369	Yes
`spectrum-icon-18-Alert`	#262 #284	Yes

Component: contextualhelp

Icon	Line links	Required
`spectrum-icon-18-Help`	#50	Yes
`spectrum-icon-18-Info`	#17 #36	Yes

Component: cyclebutton

Icon	Line links	Required
`spectrum-icon-18-Pause`	#16	?
`spectrum-icon-18-Play`	#13	?

Component: datepicker

Icon	Line links	Required
`spectrum-icon-18-Alert`	#95 #154 #195 #253	Yes
`spectrum-icon-18-Calendar`	#38 #61 #80 #102 #121 #140 #161 #180 #202 #221 #239 #260	Yes

Component: dialog

Icon	Line links	Required
`spectrum-css-icon-Cross300`	#82 #108 #133	Yes
`spectrum-icon-18-Alert`	#231 #257	Yes

Component: divider

Icon	Line links	Required
`spectrum-icon-18-Edit`	#57 #74 #91	?
`spectrum-icon-18-Properties`	#51 #68 #85	?

Component: fieldgroup

Icon	Line links	Required
`spectrum-css-icon-Asterisk100`	#311	Yes
`spectrum-css-icon-Checkmark100`	#94 #104 #166 #176 #243 #253 #406 #416 #469 #479 #505 #514 #524 #533	Yes
`spectrum-icon-18-Alert`	#221 #261	Yes

Component: fieldlabel

Icon	Line links	Required
`spectrum-css-icon-Asterisk100`	#87 #104 #114	Yes
`spectrum-css-icon-Checkmark100`	#45 #54 #127 #136 #209 #218	Yes
`spectrum-css-icon-Chevron100`	#31 #113 #195	Yes
`spectrum-css-icon-Chevron75`	#73 #78 #155 #160 #237 #242	Yes

Component: helptext

Icon	Line links	Required
`spectrum-icon-18-Alert`	#52 #66 #75 #84 #93 #107	Yes

Component: inlinealert

Icon	Line links	Required
`spectrum-icon-18-Alert`	#52 #66 #82	Yes
`spectrum-icon-18-CheckmarkCircle`	#38	Yes
`spectrum-icon-18-Info`	#24	Yes

Component: menu

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#101	Yes
`spectrum-css-icon-Chevron100`	#124	Yes
`spectrum-icon-18-Copy`	#65	?
`spectrum-icon-18-Edit`	#59	?

Component: miller

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#15 #29 #43 #62 #76 #90 #122 #155 #170	Yes
`spectrum-css-icon-Chevron100`	#21 #35 #50 #68 #82 #97 #113 #127 #135 #146 #160 #175	Yes

Component: pagination

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#15 #24 #9 #15 #25 #31 #41 #47	Yes

Component: picker

Icon	Line links	Required
`spectrum-css-icon-Asterisk100`	#222	Yes
`spectrum-css-icon-Checkmark100`	#78 #84 #90 #97 #127 #136 #145 #155 #257 #263 #269 #276 #360 #366 #372 #379 #405 #414 #423 #433 #476 #482 #488 #495	Yes
`spectrum-css-icon-Chevron100`	#59 #70 #116 #170 #196 #211 #231 #249 #294 #316 #344 #352 #394 #445 #456 #468 #510	Yes
`spectrum-css-icon-Chevron200`	#324	Yes
`spectrum-css-icon-Chevron300`	#332	Yes
`spectrum-css-icon-Chevron75`	#308	Yes
`spectrum-icon-18-Alert`	#208 #228 #246 #291 #453 #465 #507	Yes
`spectrum-icon-18-Image`	#112 #123 #132 #141 #151 #390 #401 #410 #419 #429	?

Component: pickerbutton

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#27	Yes
`spectrum-css-icon-Chevron200`	#39 #77 #89 #100 #123 #135 #147 #159	Yes
`spectrum-css-icon-Chevron300`	#51	Yes
`spectrum-css-icon-Chevron400`	#63	Yes

Component: popover

Icon	Line links	Required
`spectrum-icon-18-Alert`	#162	?

Component: quickaction

Icon	Line links	Required
`spectrum-icon-18-Copy`	#25	?
`spectrum-icon-18-Delete`	#30	?
`spectrum-icon-18-Edit`	#20	?

Component: rating

Icon	Line links	Required
`spectrum-icon-18-Star`	#17 #26 #35 #44 #53 #68 #77 #86 #95 #104 #120 #129 #138 #147 #156 #171 #180 #189 #198 #207 #222 #231 #240 #249 #258 #273 #282 #291 #300 #309 #324 #333 #342 #351 #360	Yes
`spectrum-icon-18-StarOutline`	#20 #29 #38 #47 #56 #71 #80 #89 #98 #107 #123 #132 #141 #150 #159 #174 #183 #192 #201 #210 #225 #234 #243 #252 #261 #276 #285 #294 #303 #312 #327 #336 #345 #354 #363	Yes

Component: search

Icon	Line links	Required
`spectrum-css-icon-Cross100`	#38 #54 #72 #88	Yes
`spectrum-icon-18-Magnify`	#31 #47 #65 #81	Yes

Component: searchwithin

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#29 #49 #86 #106	Yes
`spectrum-css-icon-Cross100`	#38 #58 #95 #115	Yes

Component: sidenav

Icon	Line links	Required
`spectrum-icon-18-Star`	#73 #82 #90	?

Component: splitbutton

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#11 #22 #35 #46 #59 #70	Yes

Component: stepper

Icon	Line links	Required
`spectrum-css-icon-Chevron75`	#40 #45 #60 #65 #80 #85 #100 #105 #120 #125 #140 #145 #160 #165 #180 #185 #200 #205 #220 #225 #240 #245 #260 #265 #280 #285 #300 #305	Yes

Component: swatch

Icon	Line links	Required
`spectrum-css-icon-Dash200`	#129	Yes

Component: table

Icon	Line links	Required
`spectrum-css-icon-Arrow100`	#13 #19 #62 #68 #111 #117 #160 #166 #220 #226 #330 #336 #390 #396 #500 #506 #549 #555 #596 #602 #644 #650 #691 #697 #738 #744 #785 #791	Yes
`spectrum-css-icon-Checkmark100`	#212 #239 #256 #273 #290 #307 #382 #409 #426 #443 #460 #477	Yes

Component: tabs

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#692 #739	Yes
`spectrum-css-icon-Chevron100`	#671 #682 #717 #728	Yes
`spectrum-icon-18-Document`	#123 #192 #240 #307 #337 #364 #390 #438 #465 #530 #560 #626 #656	?
`spectrum-icon-18-Filter`	#117 #186 #234 #301 #331 #359 #385 #432 #460 #524 #554 #620 #650	?
`spectrum-icon-18-Folder`	#105 #174 #222 #289 #319 #349 #375 #420 #450 #512 #542 #608 #638	?
`spectrum-icon-18-Image`	#111 #180 #228 #295 #325 #354 #380 #426 #455 #518 #548 #614 #644	?

Component: tag

Icon	Line links	Required
`spectrum-css-icon-Cross100`	#268 #282	Yes
`spectrum-css-icon-Cross200`	#308 #322	Yes
`spectrum-css-icon-Cross75`	#47 #75 #105 #135 #165 #195 #228 #242 #342 #356 #371 #385 #400 #414 #429 #443 #457 #471	Yes
`spectrum-icon-18-CheckmarkCircle`	#34 #63 #122 #182 #218 #258 #298 #350 #379 #437	Yes
`spectrum-icon-24-Alert`	#92 #152 #408 #465	?

Component: taggroup

Icon	Line links	Required
`spectrum-css-icon-Cross75`	#87 #97 #107 #125 #138 #151 #169 #182 #195	Yes
`spectrum-icon-18-CheckmarkCircle`	#60 #66 #72 #163 #176 #189	Yes

Component: textfield

Icon	Line links	Required
`spectrum-css-icon-Checkmark100`	#187 #214 #343 #354 #95 #106 #201 #212	Yes
`spectrum-css-icon-Checkmark200`	#195	Yes
`spectrum-css-icon-Checkmark300`	#203	Yes
`spectrum-css-icon-Checkmark75`	#179	Yes
`spectrum-icon-18-Alert`	#227 #238 #249 #260 #274 #303 #316 #367 #380 #409 #422 #119 #130 #159 #172 #225 #236 #265 #278	Yes

Component: toast

Icon	Line links	Required
`spectrum-css-icon-Cross100`	#27 #48 #72 #96 #121 #144 #164 #182	Yes
`spectrum-icon-18-Alert`	#61	Yes
`spectrum-icon-18-CheckmarkCircle`	#85	Yes
`spectrum-icon-18-Info`	#40 #108 #131 #154 #174	Yes

Component: tooltip

Icon	Line links	Required
`spectrum-icon-18-Alert`	#96 #103	Yes
`spectrum-icon-18-CheckmarkCircle`	#68 #75	Yes
`spectrum-icon-18-Info`	#40 #47 #295	Yes

Component: treeview

Icon	Line links	Required
`spectrum-css-icon-Chevron100`	#47 #71 #79 #87 #98 #181 #192 #203 #214 #225 #236 #269 #282 #300 #337 #377 #401 #409 #417 #428 #449 #473 #481 #489 #500 #599 #646 #657 #668 #687 #717 #742 #751 #760 #773	Yes
`spectrum-icon-18-Document`	#247 #255 #590 #610 #618 #629 #637 #679	?
`spectrum-icon-18-Folder`	#184 #195 #206 #217 #228 #239 #272 #285 #602 #649 #660 #671 #690	?

Workflow Icons being used as UI Icons

Icon	Component
`spectrum-icon-18-Alert`	combobox, datepicker, dialog, fieldgroup, helptext, inlinealert, picker, textfield, toast, tooltip
`spectrum-icon-18-Calendar`	datepicker
`spectrum-icon-18-CheckmarkCircle`	inlinealert, tag, taggroup, toast, tooltip
`spectrum-icon-18-Document`	assetlist, card
`spectrum-icon-18-Folder`	assetlist, card
`spectrum-icon-18-FolderOpen`	assetlist, breadcrumb, treeview
`spectrum-icon-18-Help`	contextualhelp
`spectrum-icon-18-Info`	badge, contextualhelp, inlinealert, toast, tooltip
`spectrum-icon-18-Magnify`	search
`spectrum-icon-18-More`	actionbar, actionmenu, card
`spectrum-icon-18-Star`	rating
`spectrum-icon-18-StarOutline`	rating

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment