@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +2047 -721
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2908 -1087
  385. package/patternfly.css +2915 -1087
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
@@ -50,8 +50,39 @@ cssPrefix: pf-v6-c-button
50
50
 
51
51
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
52
52
  <span class="pf-v6-c-button__icon">
53
- <i class="fas fa-times" aria-hidden="true"></i>
53
+ <svg
54
+ class="pf-v6-svg"
55
+ viewBox="0 0 20 20"
56
+ fill="currentColor"
57
+ aria-hidden="true"
58
+ role="img"
59
+ width="1em"
60
+ height="1em"
61
+ >
62
+ <path
63
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
64
+ />
65
+ </svg>
66
+ </span>
67
+ </button>
68
+
69
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
70
+ <span class="pf-v6-c-button__icon pf-m-start">
71
+ <svg
72
+ class="pf-v6-svg"
73
+ viewBox="0 0 352 512"
74
+ fill="currentColor"
75
+ aria-hidden="true"
76
+ role="img"
77
+ width="1em"
78
+ height="1em"
79
+ >
80
+ <path
81
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
82
+ />
83
+ </svg>
54
84
  </span>
85
+ <span class="pf-v6-c-button__text">Plain with text</span>
55
86
  </button>
56
87
 
57
88
  <br />
@@ -67,7 +98,19 @@ cssPrefix: pf-v6-c-button
67
98
  aria-label="Copy input"
68
99
  >
69
100
  <span class="pf-v6-c-button__icon">
70
- <i class="fas fa-copy" aria-hidden="true"></i>
101
+ <svg
102
+ class="pf-v6-svg"
103
+ viewBox="0 0 32 32"
104
+ fill="currentColor"
105
+ aria-hidden="true"
106
+ role="img"
107
+ width="1em"
108
+ height="1em"
109
+ >
110
+ <path
111
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
112
+ />
113
+ </svg>
71
114
  </span>
72
115
  </button>
73
116
 
@@ -79,42 +122,114 @@ cssPrefix: pf-v6-c-button
79
122
  </div>
80
123
  <button class="pf-v6-c-button pf-m-primary" type="button">
81
124
  <span class="pf-v6-c-button__icon pf-m-start">
82
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
125
+ <svg
126
+ class="pf-v6-svg"
127
+ viewBox="0 0 32 32"
128
+ fill="currentColor"
129
+ aria-hidden="true"
130
+ role="img"
131
+ width="1em"
132
+ height="1em"
133
+ >
134
+ <path
135
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
136
+ />
137
+ </svg>
83
138
  </span>
84
139
  <span class="pf-v6-c-button__text">Primary</span>
85
140
  </button>
86
141
 
87
142
  <button class="pf-v6-c-button pf-m-secondary" type="button">
88
143
  <span class="pf-v6-c-button__icon pf-m-start">
89
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
144
+ <svg
145
+ class="pf-v6-svg"
146
+ viewBox="0 0 32 32"
147
+ fill="currentColor"
148
+ aria-hidden="true"
149
+ role="img"
150
+ width="1em"
151
+ height="1em"
152
+ >
153
+ <path
154
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
155
+ />
156
+ </svg>
90
157
  </span>
91
158
  <span class="pf-v6-c-button__text">Secondary</span>
92
159
  </button>
93
160
 
94
161
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
95
162
  <span class="pf-v6-c-button__icon pf-m-start">
96
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
163
+ <svg
164
+ class="pf-v6-svg"
165
+ viewBox="0 0 32 32"
166
+ fill="currentColor"
167
+ aria-hidden="true"
168
+ role="img"
169
+ width="1em"
170
+ height="1em"
171
+ >
172
+ <path
173
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
174
+ />
175
+ </svg>
97
176
  </span>
98
177
  <span class="pf-v6-c-button__text">Secondary danger</span>
99
178
  </button>
100
179
 
101
180
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
102
181
  <span class="pf-v6-c-button__icon pf-m-start">
103
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
182
+ <svg
183
+ class="pf-v6-svg"
184
+ viewBox="0 0 32 32"
185
+ fill="currentColor"
186
+ aria-hidden="true"
187
+ role="img"
188
+ width="1em"
189
+ height="1em"
190
+ >
191
+ <path
192
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
193
+ />
194
+ </svg>
104
195
  </span>
105
196
  <span class="pf-v6-c-button__text">Tertiary</span>
106
197
  </button>
107
198
 
108
199
  <button class="pf-v6-c-button pf-m-danger" type="button">
109
200
  <span class="pf-v6-c-button__icon pf-m-start">
110
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 32 32"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
212
+ />
213
+ </svg>
111
214
  </span>
112
215
  <span class="pf-v6-c-button__text">Danger</span>
113
216
  </button>
114
217
 
115
218
  <button class="pf-v6-c-button pf-m-warning" type="button">
116
219
  <span class="pf-v6-c-button__icon pf-m-start">
117
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
220
+ <svg
221
+ class="pf-v6-svg"
222
+ viewBox="0 0 32 32"
223
+ fill="currentColor"
224
+ aria-hidden="true"
225
+ role="img"
226
+ width="1em"
227
+ height="1em"
228
+ >
229
+ <path
230
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
231
+ />
232
+ </svg>
118
233
  </span>
119
234
  <span class="pf-v6-c-button__text">Warning</span>
120
235
  </button>
@@ -124,29 +239,96 @@ cssPrefix: pf-v6-c-button
124
239
 
125
240
  <button class="pf-v6-c-button pf-m-link" type="button">
126
241
  <span class="pf-v6-c-button__icon pf-m-start">
127
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
242
+ <svg
243
+ class="pf-v6-svg"
244
+ viewBox="0 0 32 32"
245
+ fill="currentColor"
246
+ aria-hidden="true"
247
+ role="img"
248
+ width="1em"
249
+ height="1em"
250
+ >
251
+ <path
252
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
253
+ />
254
+ </svg>
128
255
  </span>
129
256
  <span class="pf-v6-c-button__text">Link</span>
130
257
  </button>
131
258
 
132
259
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
133
260
  <span class="pf-v6-c-button__icon pf-m-start">
134
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
261
+ <svg
262
+ class="pf-v6-svg"
263
+ viewBox="0 0 32 32"
264
+ fill="currentColor"
265
+ aria-hidden="true"
266
+ role="img"
267
+ width="1em"
268
+ height="1em"
269
+ >
270
+ <path
271
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
272
+ />
273
+ </svg>
135
274
  </span>
136
275
  <span class="pf-v6-c-button__text">Link danger</span>
137
276
  </button>
138
277
 
139
278
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
140
279
  <span class="pf-v6-c-button__icon pf-m-start">
141
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
280
+ <svg
281
+ class="pf-v6-svg"
282
+ viewBox="0 0 32 32"
283
+ fill="currentColor"
284
+ aria-hidden="true"
285
+ role="img"
286
+ width="1em"
287
+ height="1em"
288
+ >
289
+ <path
290
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
291
+ />
292
+ </svg>
142
293
  </span>
143
294
  <span class="pf-v6-c-button__text">Inline link</span>
144
295
  </button>
145
296
 
146
297
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
147
298
  <span class="pf-v6-c-button__icon">
148
- <i class="fas fa-times" aria-hidden="true"></i>
299
+ <svg
300
+ class="pf-v6-svg"
301
+ viewBox="0 0 20 20"
302
+ fill="currentColor"
303
+ aria-hidden="true"
304
+ role="img"
305
+ width="1em"
306
+ height="1em"
307
+ >
308
+ <path
309
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
310
+ />
311
+ </svg>
312
+ </span>
313
+ </button>
314
+
315
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
316
+ <span class="pf-v6-c-button__icon pf-m-start">
317
+ <svg
318
+ class="pf-v6-svg"
319
+ viewBox="0 0 352 512"
320
+ fill="currentColor"
321
+ aria-hidden="true"
322
+ role="img"
323
+ width="1em"
324
+ height="1em"
325
+ >
326
+ <path
327
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
328
+ />
329
+ </svg>
149
330
  </span>
331
+ <span class="pf-v6-c-button__text">Plain with text</span>
150
332
  </button>
151
333
 
152
334
  <br />
@@ -154,7 +336,19 @@ cssPrefix: pf-v6-c-button
154
336
 
155
337
  <button class="pf-v6-c-button pf-m-control" type="button">
156
338
  <span class="pf-v6-c-button__icon pf-m-start">
157
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
339
+ <svg
340
+ class="pf-v6-svg"
341
+ viewBox="0 0 32 32"
342
+ fill="currentColor"
343
+ aria-hidden="true"
344
+ role="img"
345
+ width="1em"
346
+ height="1em"
347
+ >
348
+ <path
349
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
350
+ />
351
+ </svg>
158
352
  </span>
159
353
  <span class="pf-v6-c-button__text">Control</span>
160
354
  </button>
@@ -165,7 +359,19 @@ cssPrefix: pf-v6-c-button
165
359
  aria-label="Copy input"
166
360
  >
167
361
  <span class="pf-v6-c-button__icon">
168
- <i class="fas fa-copy" aria-hidden="true"></i>
362
+ <svg
363
+ class="pf-v6-svg"
364
+ viewBox="0 0 32 32"
365
+ fill="currentColor"
366
+ aria-hidden="true"
367
+ role="img"
368
+ width="1em"
369
+ height="1em"
370
+ >
371
+ <path
372
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
373
+ />
374
+ </svg>
169
375
  </span>
170
376
  </button>
171
377
 
@@ -178,42 +384,114 @@ cssPrefix: pf-v6-c-button
178
384
  <button class="pf-v6-c-button pf-m-primary" type="button">
179
385
  <span class="pf-v6-c-button__text">Primary</span>
180
386
  <span class="pf-v6-c-button__icon pf-m-end">
181
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
387
+ <svg
388
+ class="pf-v6-svg"
389
+ viewBox="0 0 32 32"
390
+ fill="currentColor"
391
+ aria-hidden="true"
392
+ role="img"
393
+ width="1em"
394
+ height="1em"
395
+ >
396
+ <path
397
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
398
+ />
399
+ </svg>
182
400
  </span>
183
401
  </button>
184
402
 
185
403
  <button class="pf-v6-c-button pf-m-secondary" type="button">
186
404
  <span class="pf-v6-c-button__text">Secondary</span>
187
405
  <span class="pf-v6-c-button__icon pf-m-end">
188
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
406
+ <svg
407
+ class="pf-v6-svg"
408
+ viewBox="0 0 32 32"
409
+ fill="currentColor"
410
+ aria-hidden="true"
411
+ role="img"
412
+ width="1em"
413
+ height="1em"
414
+ >
415
+ <path
416
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
417
+ />
418
+ </svg>
189
419
  </span>
190
420
  </button>
191
421
 
192
422
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
193
423
  <span class="pf-v6-c-button__text">Secondary danger</span>
194
424
  <span class="pf-v6-c-button__icon pf-m-end">
195
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
425
+ <svg
426
+ class="pf-v6-svg"
427
+ viewBox="0 0 32 32"
428
+ fill="currentColor"
429
+ aria-hidden="true"
430
+ role="img"
431
+ width="1em"
432
+ height="1em"
433
+ >
434
+ <path
435
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
436
+ />
437
+ </svg>
196
438
  </span>
197
439
  </button>
198
440
 
199
441
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
200
442
  <span class="pf-v6-c-button__text">Tertiary</span>
201
443
  <span class="pf-v6-c-button__icon pf-m-end">
202
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
444
+ <svg
445
+ class="pf-v6-svg"
446
+ viewBox="0 0 32 32"
447
+ fill="currentColor"
448
+ aria-hidden="true"
449
+ role="img"
450
+ width="1em"
451
+ height="1em"
452
+ >
453
+ <path
454
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
455
+ />
456
+ </svg>
203
457
  </span>
204
458
  </button>
205
459
 
206
460
  <button class="pf-v6-c-button pf-m-danger" type="button">
207
461
  <span class="pf-v6-c-button__text">Danger</span>
208
462
  <span class="pf-v6-c-button__icon pf-m-end">
209
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
463
+ <svg
464
+ class="pf-v6-svg"
465
+ viewBox="0 0 32 32"
466
+ fill="currentColor"
467
+ aria-hidden="true"
468
+ role="img"
469
+ width="1em"
470
+ height="1em"
471
+ >
472
+ <path
473
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
474
+ />
475
+ </svg>
210
476
  </span>
211
477
  </button>
212
478
 
213
479
  <button class="pf-v6-c-button pf-m-warning" type="button">
214
480
  <span class="pf-v6-c-button__text">Warning</span>
215
481
  <span class="pf-v6-c-button__icon pf-m-end">
216
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
482
+ <svg
483
+ class="pf-v6-svg"
484
+ viewBox="0 0 32 32"
485
+ fill="currentColor"
486
+ aria-hidden="true"
487
+ role="img"
488
+ width="1em"
489
+ height="1em"
490
+ >
491
+ <path
492
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
493
+ />
494
+ </svg>
217
495
  </span>
218
496
  </button>
219
497
 
@@ -223,27 +501,94 @@ cssPrefix: pf-v6-c-button
223
501
  <button class="pf-v6-c-button pf-m-link" type="button">
224
502
  <span class="pf-v6-c-button__text">Link</span>
225
503
  <span class="pf-v6-c-button__icon pf-m-end">
226
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
504
+ <svg
505
+ class="pf-v6-svg"
506
+ viewBox="0 0 32 32"
507
+ fill="currentColor"
508
+ aria-hidden="true"
509
+ role="img"
510
+ width="1em"
511
+ height="1em"
512
+ >
513
+ <path
514
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
515
+ />
516
+ </svg>
227
517
  </span>
228
518
  </button>
229
519
 
230
520
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
231
521
  <span class="pf-v6-c-button__text">Link danger</span>
232
522
  <span class="pf-v6-c-button__icon pf-m-end">
233
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
534
+ />
535
+ </svg>
234
536
  </span>
235
537
  </button>
236
538
 
237
539
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
238
540
  <span class="pf-v6-c-button__text">Inline link</span>
239
541
  <span class="pf-v6-c-button__icon pf-m-end">
240
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
542
+ <svg
543
+ class="pf-v6-svg"
544
+ viewBox="0 0 32 32"
545
+ fill="currentColor"
546
+ aria-hidden="true"
547
+ role="img"
548
+ width="1em"
549
+ height="1em"
550
+ >
551
+ <path
552
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
553
+ />
554
+ </svg>
241
555
  </span>
242
556
  </button>
243
557
 
244
558
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
245
559
  <span class="pf-v6-c-button__icon">
246
- <i class="fas fa-times" aria-hidden="true"></i>
560
+ <svg
561
+ class="pf-v6-svg"
562
+ viewBox="0 0 20 20"
563
+ fill="currentColor"
564
+ aria-hidden="true"
565
+ role="img"
566
+ width="1em"
567
+ height="1em"
568
+ >
569
+ <path
570
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
571
+ />
572
+ </svg>
573
+ </span>
574
+ </button>
575
+
576
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
577
+ <span class="pf-v6-c-button__text">Plain with text</span>
578
+ <span class="pf-v6-c-button__icon pf-m-end">
579
+ <svg
580
+ class="pf-v6-svg"
581
+ viewBox="0 0 352 512"
582
+ fill="currentColor"
583
+ aria-hidden="true"
584
+ role="img"
585
+ width="1em"
586
+ height="1em"
587
+ >
588
+ <path
589
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
590
+ />
591
+ </svg>
247
592
  </span>
248
593
  </button>
249
594
 
@@ -253,7 +598,19 @@ cssPrefix: pf-v6-c-button
253
598
  <button class="pf-v6-c-button pf-m-control" type="button">
254
599
  <span class="pf-v6-c-button__text">Control</span>
255
600
  <span class="pf-v6-c-button__icon pf-m-end">
256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
601
+ <svg
602
+ class="pf-v6-svg"
603
+ viewBox="0 0 32 32"
604
+ fill="currentColor"
605
+ aria-hidden="true"
606
+ role="img"
607
+ width="1em"
608
+ height="1em"
609
+ >
610
+ <path
611
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
612
+ />
613
+ </svg>
257
614
  </span>
258
615
  </button>
259
616
 
@@ -263,7 +620,19 @@ cssPrefix: pf-v6-c-button
263
620
  aria-label="Copy input"
264
621
  >
265
622
  <span class="pf-v6-c-button__icon">
266
- <i class="fas fa-copy" aria-hidden="true"></i>
623
+ <svg
624
+ class="pf-v6-svg"
625
+ viewBox="0 0 32 32"
626
+ fill="currentColor"
627
+ aria-hidden="true"
628
+ role="img"
629
+ width="1em"
630
+ height="1em"
631
+ >
632
+ <path
633
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
634
+ />
635
+ </svg>
267
636
  </span>
268
637
  </button>
269
638
 
@@ -320,10 +689,45 @@ cssPrefix: pf-v6-c-button
320
689
  aria-label="Remove"
321
690
  >
322
691
  <span class="pf-v6-c-button__icon">
323
- <i class="fas fa-times" aria-hidden="true"></i>
692
+ <svg
693
+ class="pf-v6-svg"
694
+ viewBox="0 0 20 20"
695
+ fill="currentColor"
696
+ aria-hidden="true"
697
+ role="img"
698
+ width="1em"
699
+ height="1em"
700
+ >
701
+ <path
702
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
703
+ />
704
+ </svg>
324
705
  </span>
325
706
  </button>
326
707
 
708
+ <button
709
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
710
+ type="button"
711
+ aria-label="Remove"
712
+ >
713
+ <span class="pf-v6-c-button__icon pf-m-start">
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 352 512"
717
+ fill="currentColor"
718
+ aria-hidden="true"
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
725
+ />
726
+ </svg>
727
+ </span>
728
+ <span class="pf-v6-c-button__text">Plain with text</span>
729
+ </button>
730
+
327
731
  <br />
328
732
  <br />
329
733
 
@@ -337,7 +741,19 @@ cssPrefix: pf-v6-c-button
337
741
  aria-label="Copy input"
338
742
  >
339
743
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-copy" aria-hidden="true"></i>
744
+ <svg
745
+ class="pf-v6-svg"
746
+ viewBox="0 0 32 32"
747
+ fill="currentColor"
748
+ aria-hidden="true"
749
+ role="img"
750
+ width="1em"
751
+ height="1em"
752
+ >
753
+ <path
754
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
755
+ />
756
+ </svg>
341
757
  </span>
342
758
  </button>
343
759
 
@@ -349,14 +765,38 @@ cssPrefix: pf-v6-c-button
349
765
  </div>
350
766
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
351
767
  <span class="pf-v6-c-button__icon pf-m-start">
352
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
768
+ <svg
769
+ class="pf-v6-svg"
770
+ viewBox="0 0 32 32"
771
+ fill="currentColor"
772
+ aria-hidden="true"
773
+ role="img"
774
+ width="1em"
775
+ height="1em"
776
+ >
777
+ <path
778
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
779
+ />
780
+ </svg>
353
781
  </span>
354
782
  <span class="pf-v6-c-button__text">Primary</span>
355
783
  </button>
356
784
 
357
785
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
358
786
  <span class="pf-v6-c-button__icon pf-m-start">
359
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
787
+ <svg
788
+ class="pf-v6-svg"
789
+ viewBox="0 0 32 32"
790
+ fill="currentColor"
791
+ aria-hidden="true"
792
+ role="img"
793
+ width="1em"
794
+ height="1em"
795
+ >
796
+ <path
797
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
798
+ />
799
+ </svg>
360
800
  </span>
361
801
  <span class="pf-v6-c-button__text">Secondary</span>
362
802
  </button>
@@ -366,28 +806,76 @@ cssPrefix: pf-v6-c-button
366
806
  type="button"
367
807
  >
368
808
  <span class="pf-v6-c-button__icon pf-m-start">
369
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
809
+ <svg
810
+ class="pf-v6-svg"
811
+ viewBox="0 0 32 32"
812
+ fill="currentColor"
813
+ aria-hidden="true"
814
+ role="img"
815
+ width="1em"
816
+ height="1em"
817
+ >
818
+ <path
819
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
820
+ />
821
+ </svg>
370
822
  </span>
371
823
  <span class="pf-v6-c-button__text">Secondary danger</span>
372
824
  </button>
373
825
 
374
826
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
375
827
  <span class="pf-v6-c-button__icon pf-m-start">
376
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
828
+ <svg
829
+ class="pf-v6-svg"
830
+ viewBox="0 0 32 32"
831
+ fill="currentColor"
832
+ aria-hidden="true"
833
+ role="img"
834
+ width="1em"
835
+ height="1em"
836
+ >
837
+ <path
838
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
839
+ />
840
+ </svg>
377
841
  </span>
378
842
  <span class="pf-v6-c-button__text">Tertiary</span>
379
843
  </button>
380
844
 
381
845
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
382
846
  <span class="pf-v6-c-button__icon pf-m-start">
383
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
847
+ <svg
848
+ class="pf-v6-svg"
849
+ viewBox="0 0 32 32"
850
+ fill="currentColor"
851
+ aria-hidden="true"
852
+ role="img"
853
+ width="1em"
854
+ height="1em"
855
+ >
856
+ <path
857
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
858
+ />
859
+ </svg>
384
860
  </span>
385
861
  <span class="pf-v6-c-button__text">Danger</span>
386
862
  </button>
387
863
 
388
864
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
389
865
  <span class="pf-v6-c-button__icon pf-m-start">
390
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
866
+ <svg
867
+ class="pf-v6-svg"
868
+ viewBox="0 0 32 32"
869
+ fill="currentColor"
870
+ aria-hidden="true"
871
+ role="img"
872
+ width="1em"
873
+ height="1em"
874
+ >
875
+ <path
876
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
877
+ />
878
+ </svg>
391
879
  </span>
392
880
  <span class="pf-v6-c-button__text">Warning</span>
393
881
  </button>
@@ -397,23 +885,81 @@ cssPrefix: pf-v6-c-button
397
885
 
398
886
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
399
887
  <span class="pf-v6-c-button__icon pf-m-start">
400
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
888
+ <svg
889
+ class="pf-v6-svg"
890
+ viewBox="0 0 32 32"
891
+ fill="currentColor"
892
+ aria-hidden="true"
893
+ role="img"
894
+ width="1em"
895
+ height="1em"
896
+ >
897
+ <path
898
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
899
+ />
900
+ </svg>
401
901
  </span>
402
902
  <span class="pf-v6-c-button__text">Link</span>
403
903
  </button>
404
904
 
405
905
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
406
906
  <span class="pf-v6-c-button__icon pf-m-start">
407
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
907
+ <svg
908
+ class="pf-v6-svg"
909
+ viewBox="0 0 32 32"
910
+ fill="currentColor"
911
+ aria-hidden="true"
912
+ role="img"
913
+ width="1em"
914
+ height="1em"
915
+ >
916
+ <path
917
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
918
+ />
919
+ </svg>
920
+ </span>
921
+ <span class="pf-v6-c-button__text">Link danger</span>
922
+ </button>
923
+
924
+ <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
925
+ <span class="pf-v6-c-button__icon pf-m-start">
926
+ <svg
927
+ class="pf-v6-svg"
928
+ viewBox="0 0 32 32"
929
+ fill="currentColor"
930
+ aria-hidden="true"
931
+ role="img"
932
+ width="1em"
933
+ height="1em"
934
+ >
935
+ <path
936
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
937
+ />
938
+ </svg>
408
939
  </span>
409
- <span class="pf-v6-c-button__text">Link danger</span>
940
+ <span class="pf-v6-c-button__text">Inline link</span>
410
941
  </button>
411
942
 
412
- <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
413
- <span class="pf-v6-c-button__icon pf-m-start">
414
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
943
+ <button
944
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
945
+ type="button"
946
+ aria-label="Remove"
947
+ >
948
+ <span class="pf-v6-c-button__icon">
949
+ <svg
950
+ class="pf-v6-svg"
951
+ viewBox="0 0 20 20"
952
+ fill="currentColor"
953
+ aria-hidden="true"
954
+ role="img"
955
+ width="1em"
956
+ height="1em"
957
+ >
958
+ <path
959
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
960
+ />
961
+ </svg>
415
962
  </span>
416
- <span class="pf-v6-c-button__text">Inline link</span>
417
963
  </button>
418
964
 
419
965
  <button
@@ -421,9 +967,22 @@ cssPrefix: pf-v6-c-button
421
967
  type="button"
422
968
  aria-label="Remove"
423
969
  >
424
- <span class="pf-v6-c-button__icon">
425
- <i class="fas fa-times" aria-hidden="true"></i>
970
+ <span class="pf-v6-c-button__icon pf-m-start">
971
+ <svg
972
+ class="pf-v6-svg"
973
+ viewBox="0 0 352 512"
974
+ fill="currentColor"
975
+ aria-hidden="true"
976
+ role="img"
977
+ width="1em"
978
+ height="1em"
979
+ >
980
+ <path
981
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
982
+ />
983
+ </svg>
426
984
  </span>
985
+ <span class="pf-v6-c-button__text">Plain with text</span>
427
986
  </button>
428
987
 
429
988
  <br />
@@ -431,7 +990,19 @@ cssPrefix: pf-v6-c-button
431
990
 
432
991
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
433
992
  <span class="pf-v6-c-button__icon pf-m-start">
434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
993
+ <svg
994
+ class="pf-v6-svg"
995
+ viewBox="0 0 32 32"
996
+ fill="currentColor"
997
+ aria-hidden="true"
998
+ role="img"
999
+ width="1em"
1000
+ height="1em"
1001
+ >
1002
+ <path
1003
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1004
+ />
1005
+ </svg>
435
1006
  </span>
436
1007
  <span class="pf-v6-c-button__text">Control</span>
437
1008
  </button>
@@ -442,7 +1013,19 @@ cssPrefix: pf-v6-c-button
442
1013
  aria-label="Copy input"
443
1014
  >
444
1015
  <span class="pf-v6-c-button__icon">
445
- <i class="fas fa-copy" aria-hidden="true"></i>
1016
+ <svg
1017
+ class="pf-v6-svg"
1018
+ viewBox="0 0 32 32"
1019
+ fill="currentColor"
1020
+ aria-hidden="true"
1021
+ role="img"
1022
+ width="1em"
1023
+ height="1em"
1024
+ >
1025
+ <path
1026
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1027
+ />
1028
+ </svg>
446
1029
  </span>
447
1030
  </button>
448
1031
 
@@ -455,14 +1038,38 @@ cssPrefix: pf-v6-c-button
455
1038
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
456
1039
  <span class="pf-v6-c-button__text">Primary</span>
457
1040
  <span class="pf-v6-c-button__icon pf-m-end">
458
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1041
+ <svg
1042
+ class="pf-v6-svg"
1043
+ viewBox="0 0 32 32"
1044
+ fill="currentColor"
1045
+ aria-hidden="true"
1046
+ role="img"
1047
+ width="1em"
1048
+ height="1em"
1049
+ >
1050
+ <path
1051
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1052
+ />
1053
+ </svg>
459
1054
  </span>
460
1055
  </button>
461
1056
 
462
1057
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
463
1058
  <span class="pf-v6-c-button__text">Secondary</span>
464
1059
  <span class="pf-v6-c-button__icon pf-m-end">
465
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1060
+ <svg
1061
+ class="pf-v6-svg"
1062
+ viewBox="0 0 32 32"
1063
+ fill="currentColor"
1064
+ aria-hidden="true"
1065
+ role="img"
1066
+ width="1em"
1067
+ height="1em"
1068
+ >
1069
+ <path
1070
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1071
+ />
1072
+ </svg>
466
1073
  </span>
467
1074
  </button>
468
1075
 
@@ -472,28 +1079,76 @@ cssPrefix: pf-v6-c-button
472
1079
  >
473
1080
  <span class="pf-v6-c-button__text">Secondary danger</span>
474
1081
  <span class="pf-v6-c-button__icon pf-m-end">
475
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1082
+ <svg
1083
+ class="pf-v6-svg"
1084
+ viewBox="0 0 32 32"
1085
+ fill="currentColor"
1086
+ aria-hidden="true"
1087
+ role="img"
1088
+ width="1em"
1089
+ height="1em"
1090
+ >
1091
+ <path
1092
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1093
+ />
1094
+ </svg>
476
1095
  </span>
477
1096
  </button>
478
1097
 
479
1098
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
480
1099
  <span class="pf-v6-c-button__text">Tertiary</span>
481
1100
  <span class="pf-v6-c-button__icon pf-m-end">
482
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1101
+ <svg
1102
+ class="pf-v6-svg"
1103
+ viewBox="0 0 32 32"
1104
+ fill="currentColor"
1105
+ aria-hidden="true"
1106
+ role="img"
1107
+ width="1em"
1108
+ height="1em"
1109
+ >
1110
+ <path
1111
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1112
+ />
1113
+ </svg>
483
1114
  </span>
484
1115
  </button>
485
1116
 
486
1117
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
487
1118
  <span class="pf-v6-c-button__text">Danger</span>
488
1119
  <span class="pf-v6-c-button__icon pf-m-end">
489
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1120
+ <svg
1121
+ class="pf-v6-svg"
1122
+ viewBox="0 0 32 32"
1123
+ fill="currentColor"
1124
+ aria-hidden="true"
1125
+ role="img"
1126
+ width="1em"
1127
+ height="1em"
1128
+ >
1129
+ <path
1130
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1131
+ />
1132
+ </svg>
490
1133
  </span>
491
1134
  </button>
492
1135
 
493
1136
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
494
1137
  <span class="pf-v6-c-button__text">Warning</span>
495
1138
  <span class="pf-v6-c-button__icon pf-m-end">
496
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1139
+ <svg
1140
+ class="pf-v6-svg"
1141
+ viewBox="0 0 32 32"
1142
+ fill="currentColor"
1143
+ aria-hidden="true"
1144
+ role="img"
1145
+ width="1em"
1146
+ height="1em"
1147
+ >
1148
+ <path
1149
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1150
+ />
1151
+ </svg>
497
1152
  </span>
498
1153
  </button>
499
1154
 
@@ -503,21 +1158,57 @@ cssPrefix: pf-v6-c-button
503
1158
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
504
1159
  <span class="pf-v6-c-button__text">Link</span>
505
1160
  <span class="pf-v6-c-button__icon pf-m-end">
506
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1161
+ <svg
1162
+ class="pf-v6-svg"
1163
+ viewBox="0 0 32 32"
1164
+ fill="currentColor"
1165
+ aria-hidden="true"
1166
+ role="img"
1167
+ width="1em"
1168
+ height="1em"
1169
+ >
1170
+ <path
1171
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1172
+ />
1173
+ </svg>
507
1174
  </span>
508
1175
  </button>
509
1176
 
510
1177
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
511
1178
  <span class="pf-v6-c-button__text">Link danger</span>
512
1179
  <span class="pf-v6-c-button__icon pf-m-end">
513
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1180
+ <svg
1181
+ class="pf-v6-svg"
1182
+ viewBox="0 0 32 32"
1183
+ fill="currentColor"
1184
+ aria-hidden="true"
1185
+ role="img"
1186
+ width="1em"
1187
+ height="1em"
1188
+ >
1189
+ <path
1190
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1191
+ />
1192
+ </svg>
514
1193
  </span>
515
1194
  </button>
516
1195
 
517
1196
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
518
1197
  <span class="pf-v6-c-button__text">Inline link</span>
519
1198
  <span class="pf-v6-c-button__icon pf-m-end">
520
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1199
+ <svg
1200
+ class="pf-v6-svg"
1201
+ viewBox="0 0 32 32"
1202
+ fill="currentColor"
1203
+ aria-hidden="true"
1204
+ role="img"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path
1209
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1210
+ />
1211
+ </svg>
521
1212
  </span>
522
1213
  </button>
523
1214
 
@@ -527,7 +1218,42 @@ cssPrefix: pf-v6-c-button
527
1218
  aria-label="Remove"
528
1219
  >
529
1220
  <span class="pf-v6-c-button__icon">
530
- <i class="fas fa-times" aria-hidden="true"></i>
1221
+ <svg
1222
+ class="pf-v6-svg"
1223
+ viewBox="0 0 20 20"
1224
+ fill="currentColor"
1225
+ aria-hidden="true"
1226
+ role="img"
1227
+ width="1em"
1228
+ height="1em"
1229
+ >
1230
+ <path
1231
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1232
+ />
1233
+ </svg>
1234
+ </span>
1235
+ </button>
1236
+
1237
+ <button
1238
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
1239
+ type="button"
1240
+ aria-label="Remove"
1241
+ >
1242
+ <span class="pf-v6-c-button__text">Plain with text</span>
1243
+ <span class="pf-v6-c-button__icon pf-m-end">
1244
+ <svg
1245
+ class="pf-v6-svg"
1246
+ viewBox="0 0 352 512"
1247
+ fill="currentColor"
1248
+ aria-hidden="true"
1249
+ role="img"
1250
+ width="1em"
1251
+ height="1em"
1252
+ >
1253
+ <path
1254
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1255
+ />
1256
+ </svg>
531
1257
  </span>
532
1258
  </button>
533
1259
 
@@ -537,7 +1263,19 @@ cssPrefix: pf-v6-c-button
537
1263
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
538
1264
  <span class="pf-v6-c-button__text">Control</span>
539
1265
  <span class="pf-v6-c-button__icon pf-m-end">
540
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1266
+ <svg
1267
+ class="pf-v6-svg"
1268
+ viewBox="0 0 32 32"
1269
+ fill="currentColor"
1270
+ aria-hidden="true"
1271
+ role="img"
1272
+ width="1em"
1273
+ height="1em"
1274
+ >
1275
+ <path
1276
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1277
+ />
1278
+ </svg>
541
1279
  </span>
542
1280
  </button>
543
1281
 
@@ -547,7 +1285,19 @@ cssPrefix: pf-v6-c-button
547
1285
  aria-label="Copy input"
548
1286
  >
549
1287
  <span class="pf-v6-c-button__icon">
550
- <i class="fas fa-copy" aria-hidden="true"></i>
1288
+ <svg
1289
+ class="pf-v6-svg"
1290
+ viewBox="0 0 32 32"
1291
+ fill="currentColor"
1292
+ aria-hidden="true"
1293
+ role="img"
1294
+ width="1em"
1295
+ height="1em"
1296
+ >
1297
+ <path
1298
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1299
+ />
1300
+ </svg>
551
1301
  </span>
552
1302
  </button>
553
1303
 
@@ -604,8 +1354,43 @@ cssPrefix: pf-v6-c-button
604
1354
  aria-label="Remove"
605
1355
  >
606
1356
  <span class="pf-v6-c-button__icon">
607
- <i class="fas fa-times" aria-hidden="true"></i>
1357
+ <svg
1358
+ class="pf-v6-svg"
1359
+ viewBox="0 0 20 20"
1360
+ fill="currentColor"
1361
+ aria-hidden="true"
1362
+ role="img"
1363
+ width="1em"
1364
+ height="1em"
1365
+ >
1366
+ <path
1367
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1368
+ />
1369
+ </svg>
1370
+ </span>
1371
+ </button>
1372
+
1373
+ <button
1374
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1375
+ type="button"
1376
+ aria-label="Remove"
1377
+ >
1378
+ <span class="pf-v6-c-button__icon pf-m-start">
1379
+ <svg
1380
+ class="pf-v6-svg"
1381
+ viewBox="0 0 352 512"
1382
+ fill="currentColor"
1383
+ aria-hidden="true"
1384
+ role="img"
1385
+ width="1em"
1386
+ height="1em"
1387
+ >
1388
+ <path
1389
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1390
+ />
1391
+ </svg>
608
1392
  </span>
1393
+ <span class="pf-v6-c-button__text">Plain with text</span>
609
1394
  </button>
610
1395
 
611
1396
  <br />
@@ -621,7 +1406,19 @@ cssPrefix: pf-v6-c-button
621
1406
  aria-label="Copy input"
622
1407
  >
623
1408
  <span class="pf-v6-c-button__icon">
624
- <i class="fas fa-copy" aria-hidden="true"></i>
1409
+ <svg
1410
+ class="pf-v6-svg"
1411
+ viewBox="0 0 32 32"
1412
+ fill="currentColor"
1413
+ aria-hidden="true"
1414
+ role="img"
1415
+ width="1em"
1416
+ height="1em"
1417
+ >
1418
+ <path
1419
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1420
+ />
1421
+ </svg>
625
1422
  </span>
626
1423
  </button>
627
1424
 
@@ -633,14 +1430,38 @@ cssPrefix: pf-v6-c-button
633
1430
  </div>
634
1431
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
635
1432
  <span class="pf-v6-c-button__icon pf-m-start">
636
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1433
+ <svg
1434
+ class="pf-v6-svg"
1435
+ viewBox="0 0 32 32"
1436
+ fill="currentColor"
1437
+ aria-hidden="true"
1438
+ role="img"
1439
+ width="1em"
1440
+ height="1em"
1441
+ >
1442
+ <path
1443
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1444
+ />
1445
+ </svg>
637
1446
  </span>
638
1447
  <span class="pf-v6-c-button__text">Primary</span>
639
1448
  </button>
640
1449
 
641
1450
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
642
1451
  <span class="pf-v6-c-button__icon pf-m-start">
643
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1452
+ <svg
1453
+ class="pf-v6-svg"
1454
+ viewBox="0 0 32 32"
1455
+ fill="currentColor"
1456
+ aria-hidden="true"
1457
+ role="img"
1458
+ width="1em"
1459
+ height="1em"
1460
+ >
1461
+ <path
1462
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1463
+ />
1464
+ </svg>
644
1465
  </span>
645
1466
  <span class="pf-v6-c-button__text">Secondary</span>
646
1467
  </button>
@@ -650,28 +1471,76 @@ cssPrefix: pf-v6-c-button
650
1471
  type="button"
651
1472
  >
652
1473
  <span class="pf-v6-c-button__icon pf-m-start">
653
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1474
+ <svg
1475
+ class="pf-v6-svg"
1476
+ viewBox="0 0 32 32"
1477
+ fill="currentColor"
1478
+ aria-hidden="true"
1479
+ role="img"
1480
+ width="1em"
1481
+ height="1em"
1482
+ >
1483
+ <path
1484
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1485
+ />
1486
+ </svg>
654
1487
  </span>
655
1488
  <span class="pf-v6-c-button__text">Secondary danger</span>
656
1489
  </button>
657
1490
 
658
1491
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
659
1492
  <span class="pf-v6-c-button__icon pf-m-start">
660
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1493
+ <svg
1494
+ class="pf-v6-svg"
1495
+ viewBox="0 0 32 32"
1496
+ fill="currentColor"
1497
+ aria-hidden="true"
1498
+ role="img"
1499
+ width="1em"
1500
+ height="1em"
1501
+ >
1502
+ <path
1503
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1504
+ />
1505
+ </svg>
661
1506
  </span>
662
1507
  <span class="pf-v6-c-button__text">Tertiary</span>
663
1508
  </button>
664
1509
 
665
1510
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
666
1511
  <span class="pf-v6-c-button__icon pf-m-start">
667
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1512
+ <svg
1513
+ class="pf-v6-svg"
1514
+ viewBox="0 0 32 32"
1515
+ fill="currentColor"
1516
+ aria-hidden="true"
1517
+ role="img"
1518
+ width="1em"
1519
+ height="1em"
1520
+ >
1521
+ <path
1522
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1523
+ />
1524
+ </svg>
668
1525
  </span>
669
1526
  <span class="pf-v6-c-button__text">Danger</span>
670
1527
  </button>
671
1528
 
672
1529
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
673
1530
  <span class="pf-v6-c-button__icon pf-m-start">
674
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1531
+ <svg
1532
+ class="pf-v6-svg"
1533
+ viewBox="0 0 32 32"
1534
+ fill="currentColor"
1535
+ aria-hidden="true"
1536
+ role="img"
1537
+ width="1em"
1538
+ height="1em"
1539
+ >
1540
+ <path
1541
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1542
+ />
1543
+ </svg>
675
1544
  </span>
676
1545
  <span class="pf-v6-c-button__text">Warning</span>
677
1546
  </button>
@@ -681,21 +1550,57 @@ cssPrefix: pf-v6-c-button
681
1550
 
682
1551
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
683
1552
  <span class="pf-v6-c-button__icon pf-m-start">
684
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1553
+ <svg
1554
+ class="pf-v6-svg"
1555
+ viewBox="0 0 32 32"
1556
+ fill="currentColor"
1557
+ aria-hidden="true"
1558
+ role="img"
1559
+ width="1em"
1560
+ height="1em"
1561
+ >
1562
+ <path
1563
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1564
+ />
1565
+ </svg>
685
1566
  </span>
686
1567
  <span class="pf-v6-c-button__text">Link</span>
687
1568
  </button>
688
1569
 
689
1570
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
690
1571
  <span class="pf-v6-c-button__icon pf-m-start">
691
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1572
+ <svg
1573
+ class="pf-v6-svg"
1574
+ viewBox="0 0 32 32"
1575
+ fill="currentColor"
1576
+ aria-hidden="true"
1577
+ role="img"
1578
+ width="1em"
1579
+ height="1em"
1580
+ >
1581
+ <path
1582
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1583
+ />
1584
+ </svg>
692
1585
  </span>
693
1586
  <span class="pf-v6-c-button__text">Link danger</span>
694
1587
  </button>
695
1588
 
696
1589
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
697
1590
  <span class="pf-v6-c-button__icon pf-m-start">
698
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1591
+ <svg
1592
+ class="pf-v6-svg"
1593
+ viewBox="0 0 32 32"
1594
+ fill="currentColor"
1595
+ aria-hidden="true"
1596
+ role="img"
1597
+ width="1em"
1598
+ height="1em"
1599
+ >
1600
+ <path
1601
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1602
+ />
1603
+ </svg>
699
1604
  </span>
700
1605
  <span class="pf-v6-c-button__text">Inline link</span>
701
1606
  </button>
@@ -706,8 +1611,43 @@ cssPrefix: pf-v6-c-button
706
1611
  aria-label="Remove"
707
1612
  >
708
1613
  <span class="pf-v6-c-button__icon">
709
- <i class="fas fa-times" aria-hidden="true"></i>
1614
+ <svg
1615
+ class="pf-v6-svg"
1616
+ viewBox="0 0 20 20"
1617
+ fill="currentColor"
1618
+ aria-hidden="true"
1619
+ role="img"
1620
+ width="1em"
1621
+ height="1em"
1622
+ >
1623
+ <path
1624
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1625
+ />
1626
+ </svg>
1627
+ </span>
1628
+ </button>
1629
+
1630
+ <button
1631
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1632
+ type="button"
1633
+ aria-label="Remove"
1634
+ >
1635
+ <span class="pf-v6-c-button__icon pf-m-start">
1636
+ <svg
1637
+ class="pf-v6-svg"
1638
+ viewBox="0 0 352 512"
1639
+ fill="currentColor"
1640
+ aria-hidden="true"
1641
+ role="img"
1642
+ width="1em"
1643
+ height="1em"
1644
+ >
1645
+ <path
1646
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1647
+ />
1648
+ </svg>
710
1649
  </span>
1650
+ <span class="pf-v6-c-button__text">Plain with text</span>
711
1651
  </button>
712
1652
 
713
1653
  <br />
@@ -715,7 +1655,19 @@ cssPrefix: pf-v6-c-button
715
1655
 
716
1656
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
717
1657
  <span class="pf-v6-c-button__icon pf-m-start">
718
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1658
+ <svg
1659
+ class="pf-v6-svg"
1660
+ viewBox="0 0 32 32"
1661
+ fill="currentColor"
1662
+ aria-hidden="true"
1663
+ role="img"
1664
+ width="1em"
1665
+ height="1em"
1666
+ >
1667
+ <path
1668
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1669
+ />
1670
+ </svg>
719
1671
  </span>
720
1672
  <span class="pf-v6-c-button__text">Control</span>
721
1673
  </button>
@@ -726,7 +1678,19 @@ cssPrefix: pf-v6-c-button
726
1678
  aria-label="Copy input"
727
1679
  >
728
1680
  <span class="pf-v6-c-button__icon">
729
- <i class="fas fa-copy" aria-hidden="true"></i>
1681
+ <svg
1682
+ class="pf-v6-svg"
1683
+ viewBox="0 0 32 32"
1684
+ fill="currentColor"
1685
+ aria-hidden="true"
1686
+ role="img"
1687
+ width="1em"
1688
+ height="1em"
1689
+ >
1690
+ <path
1691
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1692
+ />
1693
+ </svg>
730
1694
  </span>
731
1695
  </button>
732
1696
 
@@ -739,14 +1703,38 @@ cssPrefix: pf-v6-c-button
739
1703
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
740
1704
  <span class="pf-v6-c-button__text">Primary</span>
741
1705
  <span class="pf-v6-c-button__icon pf-m-end">
742
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1706
+ <svg
1707
+ class="pf-v6-svg"
1708
+ viewBox="0 0 32 32"
1709
+ fill="currentColor"
1710
+ aria-hidden="true"
1711
+ role="img"
1712
+ width="1em"
1713
+ height="1em"
1714
+ >
1715
+ <path
1716
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1717
+ />
1718
+ </svg>
743
1719
  </span>
744
1720
  </button>
745
1721
 
746
1722
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
747
1723
  <span class="pf-v6-c-button__text">Secondary</span>
748
1724
  <span class="pf-v6-c-button__icon pf-m-end">
749
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1725
+ <svg
1726
+ class="pf-v6-svg"
1727
+ viewBox="0 0 32 32"
1728
+ fill="currentColor"
1729
+ aria-hidden="true"
1730
+ role="img"
1731
+ width="1em"
1732
+ height="1em"
1733
+ >
1734
+ <path
1735
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1736
+ />
1737
+ </svg>
750
1738
  </span>
751
1739
  </button>
752
1740
 
@@ -756,28 +1744,76 @@ cssPrefix: pf-v6-c-button
756
1744
  >
757
1745
  <span class="pf-v6-c-button__text">Secondary danger</span>
758
1746
  <span class="pf-v6-c-button__icon pf-m-end">
759
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1747
+ <svg
1748
+ class="pf-v6-svg"
1749
+ viewBox="0 0 32 32"
1750
+ fill="currentColor"
1751
+ aria-hidden="true"
1752
+ role="img"
1753
+ width="1em"
1754
+ height="1em"
1755
+ >
1756
+ <path
1757
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1758
+ />
1759
+ </svg>
760
1760
  </span>
761
1761
  </button>
762
1762
 
763
1763
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
764
1764
  <span class="pf-v6-c-button__text">Tertiary</span>
765
1765
  <span class="pf-v6-c-button__icon pf-m-end">
766
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1766
+ <svg
1767
+ class="pf-v6-svg"
1768
+ viewBox="0 0 32 32"
1769
+ fill="currentColor"
1770
+ aria-hidden="true"
1771
+ role="img"
1772
+ width="1em"
1773
+ height="1em"
1774
+ >
1775
+ <path
1776
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1777
+ />
1778
+ </svg>
767
1779
  </span>
768
1780
  </button>
769
1781
 
770
1782
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
771
1783
  <span class="pf-v6-c-button__text">Danger</span>
772
1784
  <span class="pf-v6-c-button__icon pf-m-end">
773
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1785
+ <svg
1786
+ class="pf-v6-svg"
1787
+ viewBox="0 0 32 32"
1788
+ fill="currentColor"
1789
+ aria-hidden="true"
1790
+ role="img"
1791
+ width="1em"
1792
+ height="1em"
1793
+ >
1794
+ <path
1795
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1796
+ />
1797
+ </svg>
774
1798
  </span>
775
1799
  </button>
776
1800
 
777
1801
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
778
1802
  <span class="pf-v6-c-button__text">Warning</span>
779
1803
  <span class="pf-v6-c-button__icon pf-m-end">
780
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1804
+ <svg
1805
+ class="pf-v6-svg"
1806
+ viewBox="0 0 32 32"
1807
+ fill="currentColor"
1808
+ aria-hidden="true"
1809
+ role="img"
1810
+ width="1em"
1811
+ height="1em"
1812
+ >
1813
+ <path
1814
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1815
+ />
1816
+ </svg>
781
1817
  </span>
782
1818
  </button>
783
1819
 
@@ -787,21 +1823,79 @@ cssPrefix: pf-v6-c-button
787
1823
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
788
1824
  <span class="pf-v6-c-button__text">Link</span>
789
1825
  <span class="pf-v6-c-button__icon pf-m-end">
790
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1826
+ <svg
1827
+ class="pf-v6-svg"
1828
+ viewBox="0 0 32 32"
1829
+ fill="currentColor"
1830
+ aria-hidden="true"
1831
+ role="img"
1832
+ width="1em"
1833
+ height="1em"
1834
+ >
1835
+ <path
1836
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1837
+ />
1838
+ </svg>
791
1839
  </span>
792
1840
  </button>
793
1841
 
794
1842
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
795
1843
  <span class="pf-v6-c-button__text">Link danger</span>
796
1844
  <span class="pf-v6-c-button__icon pf-m-end">
797
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1845
+ <svg
1846
+ class="pf-v6-svg"
1847
+ viewBox="0 0 32 32"
1848
+ fill="currentColor"
1849
+ aria-hidden="true"
1850
+ role="img"
1851
+ width="1em"
1852
+ height="1em"
1853
+ >
1854
+ <path
1855
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1856
+ />
1857
+ </svg>
798
1858
  </span>
799
1859
  </button>
800
1860
 
801
1861
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
802
1862
  <span class="pf-v6-c-button__text">Inline link</span>
803
1863
  <span class="pf-v6-c-button__icon pf-m-end">
804
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1864
+ <svg
1865
+ class="pf-v6-svg"
1866
+ viewBox="0 0 32 32"
1867
+ fill="currentColor"
1868
+ aria-hidden="true"
1869
+ role="img"
1870
+ width="1em"
1871
+ height="1em"
1872
+ >
1873
+ <path
1874
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1875
+ />
1876
+ </svg>
1877
+ </span>
1878
+ </button>
1879
+
1880
+ <button
1881
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1882
+ type="button"
1883
+ aria-label="Remove"
1884
+ >
1885
+ <span class="pf-v6-c-button__icon">
1886
+ <svg
1887
+ class="pf-v6-svg"
1888
+ viewBox="0 0 20 20"
1889
+ fill="currentColor"
1890
+ aria-hidden="true"
1891
+ role="img"
1892
+ width="1em"
1893
+ height="1em"
1894
+ >
1895
+ <path
1896
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1897
+ />
1898
+ </svg>
805
1899
  </span>
806
1900
  </button>
807
1901
 
@@ -810,8 +1904,21 @@ cssPrefix: pf-v6-c-button
810
1904
  type="button"
811
1905
  aria-label="Remove"
812
1906
  >
813
- <span class="pf-v6-c-button__icon">
814
- <i class="fas fa-times" aria-hidden="true"></i>
1907
+ <span class="pf-v6-c-button__text">Plain with text</span>
1908
+ <span class="pf-v6-c-button__icon pf-m-end">
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 352 512"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1920
+ />
1921
+ </svg>
815
1922
  </span>
816
1923
  </button>
817
1924
 
@@ -821,7 +1928,19 @@ cssPrefix: pf-v6-c-button
821
1928
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
822
1929
  <span class="pf-v6-c-button__text">Control</span>
823
1930
  <span class="pf-v6-c-button__icon pf-m-end">
824
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1931
+ <svg
1932
+ class="pf-v6-svg"
1933
+ viewBox="0 0 32 32"
1934
+ fill="currentColor"
1935
+ aria-hidden="true"
1936
+ role="img"
1937
+ width="1em"
1938
+ height="1em"
1939
+ >
1940
+ <path
1941
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1942
+ />
1943
+ </svg>
825
1944
  </span>
826
1945
  </button>
827
1946
 
@@ -831,7 +1950,19 @@ cssPrefix: pf-v6-c-button
831
1950
  aria-label="Copy input"
832
1951
  >
833
1952
  <span class="pf-v6-c-button__icon">
834
- <i class="fas fa-copy" aria-hidden="true"></i>
1953
+ <svg
1954
+ class="pf-v6-svg"
1955
+ viewBox="0 0 32 32"
1956
+ fill="currentColor"
1957
+ aria-hidden="true"
1958
+ role="img"
1959
+ width="1em"
1960
+ height="1em"
1961
+ >
1962
+ <path
1963
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1964
+ />
1965
+ </svg>
835
1966
  </span>
836
1967
  </button>
837
1968
 
@@ -890,8 +2021,44 @@ cssPrefix: pf-v6-c-button
890
2021
  disabled
891
2022
  >
892
2023
  <span class="pf-v6-c-button__icon">
893
- <i class="fas fa-times" aria-hidden="true"></i>
2024
+ <svg
2025
+ class="pf-v6-svg"
2026
+ viewBox="0 0 20 20"
2027
+ fill="currentColor"
2028
+ aria-hidden="true"
2029
+ role="img"
2030
+ width="1em"
2031
+ height="1em"
2032
+ >
2033
+ <path
2034
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2035
+ />
2036
+ </svg>
2037
+ </span>
2038
+ </button>
2039
+
2040
+ <button
2041
+ class="pf-v6-c-button pf-m-plain"
2042
+ type="button"
2043
+ aria-label="Remove"
2044
+ disabled
2045
+ >
2046
+ <span class="pf-v6-c-button__icon pf-m-start">
2047
+ <svg
2048
+ class="pf-v6-svg"
2049
+ viewBox="0 0 352 512"
2050
+ fill="currentColor"
2051
+ aria-hidden="true"
2052
+ role="img"
2053
+ width="1em"
2054
+ height="1em"
2055
+ >
2056
+ <path
2057
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2058
+ />
2059
+ </svg>
894
2060
  </span>
2061
+ <span class="pf-v6-c-button__text">Plain with text</span>
895
2062
  </button>
896
2063
 
897
2064
  <br />
@@ -908,7 +2075,19 @@ cssPrefix: pf-v6-c-button
908
2075
  disabled
909
2076
  >
910
2077
  <span class="pf-v6-c-button__icon">
911
- <i class="fas fa-copy" aria-hidden="true"></i>
2078
+ <svg
2079
+ class="pf-v6-svg"
2080
+ viewBox="0 0 32 32"
2081
+ fill="currentColor"
2082
+ aria-hidden="true"
2083
+ role="img"
2084
+ width="1em"
2085
+ height="1em"
2086
+ >
2087
+ <path
2088
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2089
+ />
2090
+ </svg>
912
2091
  </span>
913
2092
  </button>
914
2093
 
@@ -920,14 +2099,38 @@ cssPrefix: pf-v6-c-button
920
2099
  </div>
921
2100
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
922
2101
  <span class="pf-v6-c-button__icon pf-m-start">
923
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2102
+ <svg
2103
+ class="pf-v6-svg"
2104
+ viewBox="0 0 32 32"
2105
+ fill="currentColor"
2106
+ aria-hidden="true"
2107
+ role="img"
2108
+ width="1em"
2109
+ height="1em"
2110
+ >
2111
+ <path
2112
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2113
+ />
2114
+ </svg>
924
2115
  </span>
925
2116
  <span class="pf-v6-c-button__text">Primary</span>
926
2117
  </button>
927
2118
 
928
2119
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
929
2120
  <span class="pf-v6-c-button__icon pf-m-start">
930
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2121
+ <svg
2122
+ class="pf-v6-svg"
2123
+ viewBox="0 0 32 32"
2124
+ fill="currentColor"
2125
+ aria-hidden="true"
2126
+ role="img"
2127
+ width="1em"
2128
+ height="1em"
2129
+ >
2130
+ <path
2131
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2132
+ />
2133
+ </svg>
931
2134
  </span>
932
2135
  <span class="pf-v6-c-button__text">Secondary</span>
933
2136
  </button>
@@ -938,28 +2141,76 @@ cssPrefix: pf-v6-c-button
938
2141
  disabled
939
2142
  >
940
2143
  <span class="pf-v6-c-button__icon pf-m-start">
941
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2144
+ <svg
2145
+ class="pf-v6-svg"
2146
+ viewBox="0 0 32 32"
2147
+ fill="currentColor"
2148
+ aria-hidden="true"
2149
+ role="img"
2150
+ width="1em"
2151
+ height="1em"
2152
+ >
2153
+ <path
2154
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2155
+ />
2156
+ </svg>
942
2157
  </span>
943
2158
  <span class="pf-v6-c-button__text">Secondary danger</span>
944
2159
  </button>
945
2160
 
946
2161
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
947
2162
  <span class="pf-v6-c-button__icon pf-m-start">
948
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2163
+ <svg
2164
+ class="pf-v6-svg"
2165
+ viewBox="0 0 32 32"
2166
+ fill="currentColor"
2167
+ aria-hidden="true"
2168
+ role="img"
2169
+ width="1em"
2170
+ height="1em"
2171
+ >
2172
+ <path
2173
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2174
+ />
2175
+ </svg>
949
2176
  </span>
950
2177
  <span class="pf-v6-c-button__text">Tertiary</span>
951
2178
  </button>
952
2179
 
953
2180
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
954
2181
  <span class="pf-v6-c-button__icon pf-m-start">
955
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2182
+ <svg
2183
+ class="pf-v6-svg"
2184
+ viewBox="0 0 32 32"
2185
+ fill="currentColor"
2186
+ aria-hidden="true"
2187
+ role="img"
2188
+ width="1em"
2189
+ height="1em"
2190
+ >
2191
+ <path
2192
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2193
+ />
2194
+ </svg>
956
2195
  </span>
957
2196
  <span class="pf-v6-c-button__text">Danger</span>
958
2197
  </button>
959
2198
 
960
2199
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
961
2200
  <span class="pf-v6-c-button__icon pf-m-start">
962
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2201
+ <svg
2202
+ class="pf-v6-svg"
2203
+ viewBox="0 0 32 32"
2204
+ fill="currentColor"
2205
+ aria-hidden="true"
2206
+ role="img"
2207
+ width="1em"
2208
+ height="1em"
2209
+ >
2210
+ <path
2211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2212
+ />
2213
+ </svg>
963
2214
  </span>
964
2215
  <span class="pf-v6-c-button__text">Warning</span>
965
2216
  </button>
@@ -969,21 +2220,57 @@ cssPrefix: pf-v6-c-button
969
2220
 
970
2221
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
971
2222
  <span class="pf-v6-c-button__icon pf-m-start">
972
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2223
+ <svg
2224
+ class="pf-v6-svg"
2225
+ viewBox="0 0 32 32"
2226
+ fill="currentColor"
2227
+ aria-hidden="true"
2228
+ role="img"
2229
+ width="1em"
2230
+ height="1em"
2231
+ >
2232
+ <path
2233
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2234
+ />
2235
+ </svg>
973
2236
  </span>
974
2237
  <span class="pf-v6-c-button__text">Link</span>
975
2238
  </button>
976
2239
 
977
2240
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
978
2241
  <span class="pf-v6-c-button__icon pf-m-start">
979
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2242
+ <svg
2243
+ class="pf-v6-svg"
2244
+ viewBox="0 0 32 32"
2245
+ fill="currentColor"
2246
+ aria-hidden="true"
2247
+ role="img"
2248
+ width="1em"
2249
+ height="1em"
2250
+ >
2251
+ <path
2252
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2253
+ />
2254
+ </svg>
980
2255
  </span>
981
2256
  <span class="pf-v6-c-button__text">Link danger</span>
982
2257
  </button>
983
2258
 
984
2259
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
985
2260
  <span class="pf-v6-c-button__icon pf-m-start">
986
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2261
+ <svg
2262
+ class="pf-v6-svg"
2263
+ viewBox="0 0 32 32"
2264
+ fill="currentColor"
2265
+ aria-hidden="true"
2266
+ role="img"
2267
+ width="1em"
2268
+ height="1em"
2269
+ >
2270
+ <path
2271
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2272
+ />
2273
+ </svg>
987
2274
  </span>
988
2275
  <span class="pf-v6-c-button__text">Inline link</span>
989
2276
  </button>
@@ -995,8 +2282,44 @@ cssPrefix: pf-v6-c-button
995
2282
  disabled
996
2283
  >
997
2284
  <span class="pf-v6-c-button__icon">
998
- <i class="fas fa-times" aria-hidden="true"></i>
2285
+ <svg
2286
+ class="pf-v6-svg"
2287
+ viewBox="0 0 20 20"
2288
+ fill="currentColor"
2289
+ aria-hidden="true"
2290
+ role="img"
2291
+ width="1em"
2292
+ height="1em"
2293
+ >
2294
+ <path
2295
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2296
+ />
2297
+ </svg>
2298
+ </span>
2299
+ </button>
2300
+
2301
+ <button
2302
+ class="pf-v6-c-button pf-m-plain"
2303
+ type="button"
2304
+ aria-label="Remove"
2305
+ disabled
2306
+ >
2307
+ <span class="pf-v6-c-button__icon pf-m-start">
2308
+ <svg
2309
+ class="pf-v6-svg"
2310
+ viewBox="0 0 352 512"
2311
+ fill="currentColor"
2312
+ aria-hidden="true"
2313
+ role="img"
2314
+ width="1em"
2315
+ height="1em"
2316
+ >
2317
+ <path
2318
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2319
+ />
2320
+ </svg>
999
2321
  </span>
2322
+ <span class="pf-v6-c-button__text">Plain with text</span>
1000
2323
  </button>
1001
2324
 
1002
2325
  <br />
@@ -1004,7 +2327,19 @@ cssPrefix: pf-v6-c-button
1004
2327
 
1005
2328
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1006
2329
  <span class="pf-v6-c-button__icon pf-m-start">
1007
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2330
+ <svg
2331
+ class="pf-v6-svg"
2332
+ viewBox="0 0 32 32"
2333
+ fill="currentColor"
2334
+ aria-hidden="true"
2335
+ role="img"
2336
+ width="1em"
2337
+ height="1em"
2338
+ >
2339
+ <path
2340
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2341
+ />
2342
+ </svg>
1008
2343
  </span>
1009
2344
  <span class="pf-v6-c-button__text">Control</span>
1010
2345
  </button>
@@ -1016,7 +2351,19 @@ cssPrefix: pf-v6-c-button
1016
2351
  disabled
1017
2352
  >
1018
2353
  <span class="pf-v6-c-button__icon">
1019
- <i class="fas fa-copy" aria-hidden="true"></i>
2354
+ <svg
2355
+ class="pf-v6-svg"
2356
+ viewBox="0 0 32 32"
2357
+ fill="currentColor"
2358
+ aria-hidden="true"
2359
+ role="img"
2360
+ width="1em"
2361
+ height="1em"
2362
+ >
2363
+ <path
2364
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2365
+ />
2366
+ </svg>
1020
2367
  </span>
1021
2368
  </button>
1022
2369
 
@@ -1029,14 +2376,38 @@ cssPrefix: pf-v6-c-button
1029
2376
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1030
2377
  <span class="pf-v6-c-button__text">Primary</span>
1031
2378
  <span class="pf-v6-c-button__icon pf-m-end">
1032
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2379
+ <svg
2380
+ class="pf-v6-svg"
2381
+ viewBox="0 0 32 32"
2382
+ fill="currentColor"
2383
+ aria-hidden="true"
2384
+ role="img"
2385
+ width="1em"
2386
+ height="1em"
2387
+ >
2388
+ <path
2389
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2390
+ />
2391
+ </svg>
1033
2392
  </span>
1034
2393
  </button>
1035
2394
 
1036
2395
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
1037
2396
  <span class="pf-v6-c-button__text">Secondary</span>
1038
2397
  <span class="pf-v6-c-button__icon pf-m-end">
1039
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2398
+ <svg
2399
+ class="pf-v6-svg"
2400
+ viewBox="0 0 32 32"
2401
+ fill="currentColor"
2402
+ aria-hidden="true"
2403
+ role="img"
2404
+ width="1em"
2405
+ height="1em"
2406
+ >
2407
+ <path
2408
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2409
+ />
2410
+ </svg>
1040
2411
  </span>
1041
2412
  </button>
1042
2413
 
@@ -1047,28 +2418,76 @@ cssPrefix: pf-v6-c-button
1047
2418
  >
1048
2419
  <span class="pf-v6-c-button__text">Secondary danger</span>
1049
2420
  <span class="pf-v6-c-button__icon pf-m-end">
1050
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2421
+ <svg
2422
+ class="pf-v6-svg"
2423
+ viewBox="0 0 32 32"
2424
+ fill="currentColor"
2425
+ aria-hidden="true"
2426
+ role="img"
2427
+ width="1em"
2428
+ height="1em"
2429
+ >
2430
+ <path
2431
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2432
+ />
2433
+ </svg>
1051
2434
  </span>
1052
2435
  </button>
1053
2436
 
1054
2437
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
1055
2438
  <span class="pf-v6-c-button__text">Tertiary</span>
1056
2439
  <span class="pf-v6-c-button__icon pf-m-end">
1057
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2440
+ <svg
2441
+ class="pf-v6-svg"
2442
+ viewBox="0 0 32 32"
2443
+ fill="currentColor"
2444
+ aria-hidden="true"
2445
+ role="img"
2446
+ width="1em"
2447
+ height="1em"
2448
+ >
2449
+ <path
2450
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2451
+ />
2452
+ </svg>
1058
2453
  </span>
1059
2454
  </button>
1060
2455
 
1061
2456
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
1062
2457
  <span class="pf-v6-c-button__text">Danger</span>
1063
2458
  <span class="pf-v6-c-button__icon pf-m-end">
1064
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2459
+ <svg
2460
+ class="pf-v6-svg"
2461
+ viewBox="0 0 32 32"
2462
+ fill="currentColor"
2463
+ aria-hidden="true"
2464
+ role="img"
2465
+ width="1em"
2466
+ height="1em"
2467
+ >
2468
+ <path
2469
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2470
+ />
2471
+ </svg>
1065
2472
  </span>
1066
2473
  </button>
1067
2474
 
1068
2475
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
1069
2476
  <span class="pf-v6-c-button__text">Warning</span>
1070
2477
  <span class="pf-v6-c-button__icon pf-m-end">
1071
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2478
+ <svg
2479
+ class="pf-v6-svg"
2480
+ viewBox="0 0 32 32"
2481
+ fill="currentColor"
2482
+ aria-hidden="true"
2483
+ role="img"
2484
+ width="1em"
2485
+ height="1em"
2486
+ >
2487
+ <path
2488
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2489
+ />
2490
+ </svg>
1072
2491
  </span>
1073
2492
  </button>
1074
2493
 
@@ -1078,21 +2497,57 @@ cssPrefix: pf-v6-c-button
1078
2497
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
1079
2498
  <span class="pf-v6-c-button__text">Link</span>
1080
2499
  <span class="pf-v6-c-button__icon pf-m-end">
1081
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2500
+ <svg
2501
+ class="pf-v6-svg"
2502
+ viewBox="0 0 32 32"
2503
+ fill="currentColor"
2504
+ aria-hidden="true"
2505
+ role="img"
2506
+ width="1em"
2507
+ height="1em"
2508
+ >
2509
+ <path
2510
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2511
+ />
2512
+ </svg>
1082
2513
  </span>
1083
2514
  </button>
1084
2515
 
1085
2516
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
1086
2517
  <span class="pf-v6-c-button__text">Link danger</span>
1087
2518
  <span class="pf-v6-c-button__icon pf-m-end">
1088
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2519
+ <svg
2520
+ class="pf-v6-svg"
2521
+ viewBox="0 0 32 32"
2522
+ fill="currentColor"
2523
+ aria-hidden="true"
2524
+ role="img"
2525
+ width="1em"
2526
+ height="1em"
2527
+ >
2528
+ <path
2529
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2530
+ />
2531
+ </svg>
1089
2532
  </span>
1090
2533
  </button>
1091
2534
 
1092
2535
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
1093
2536
  <span class="pf-v6-c-button__text">Inline link</span>
1094
2537
  <span class="pf-v6-c-button__icon pf-m-end">
1095
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2538
+ <svg
2539
+ class="pf-v6-svg"
2540
+ viewBox="0 0 32 32"
2541
+ fill="currentColor"
2542
+ aria-hidden="true"
2543
+ role="img"
2544
+ width="1em"
2545
+ height="1em"
2546
+ >
2547
+ <path
2548
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2549
+ />
2550
+ </svg>
1096
2551
  </span>
1097
2552
  </button>
1098
2553
 
@@ -1103,7 +2558,43 @@ cssPrefix: pf-v6-c-button
1103
2558
  disabled
1104
2559
  >
1105
2560
  <span class="pf-v6-c-button__icon">
1106
- <i class="fas fa-times" aria-hidden="true"></i>
2561
+ <svg
2562
+ class="pf-v6-svg"
2563
+ viewBox="0 0 20 20"
2564
+ fill="currentColor"
2565
+ aria-hidden="true"
2566
+ role="img"
2567
+ width="1em"
2568
+ height="1em"
2569
+ >
2570
+ <path
2571
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2572
+ />
2573
+ </svg>
2574
+ </span>
2575
+ </button>
2576
+
2577
+ <button
2578
+ class="pf-v6-c-button pf-m-plain"
2579
+ type="button"
2580
+ aria-label="Remove"
2581
+ disabled
2582
+ >
2583
+ <span class="pf-v6-c-button__text">Plain with text</span>
2584
+ <span class="pf-v6-c-button__icon pf-m-end">
2585
+ <svg
2586
+ class="pf-v6-svg"
2587
+ viewBox="0 0 352 512"
2588
+ fill="currentColor"
2589
+ aria-hidden="true"
2590
+ role="img"
2591
+ width="1em"
2592
+ height="1em"
2593
+ >
2594
+ <path
2595
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2596
+ />
2597
+ </svg>
1107
2598
  </span>
1108
2599
  </button>
1109
2600
 
@@ -1113,7 +2604,19 @@ cssPrefix: pf-v6-c-button
1113
2604
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1114
2605
  <span class="pf-v6-c-button__text">Control</span>
1115
2606
  <span class="pf-v6-c-button__icon pf-m-end">
1116
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2607
+ <svg
2608
+ class="pf-v6-svg"
2609
+ viewBox="0 0 32 32"
2610
+ fill="currentColor"
2611
+ aria-hidden="true"
2612
+ role="img"
2613
+ width="1em"
2614
+ height="1em"
2615
+ >
2616
+ <path
2617
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2618
+ />
2619
+ </svg>
1117
2620
  </span>
1118
2621
  </button>
1119
2622
 
@@ -1124,7 +2627,19 @@ cssPrefix: pf-v6-c-button
1124
2627
  disabled
1125
2628
  >
1126
2629
  <span class="pf-v6-c-button__icon">
1127
- <i class="fas fa-copy" aria-hidden="true"></i>
2630
+ <svg
2631
+ class="pf-v6-svg"
2632
+ viewBox="0 0 32 32"
2633
+ fill="currentColor"
2634
+ aria-hidden="true"
2635
+ role="img"
2636
+ width="1em"
2637
+ height="1em"
2638
+ >
2639
+ <path
2640
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2641
+ />
2642
+ </svg>
1128
2643
  </span>
1129
2644
  </button>
1130
2645
 
@@ -1215,8 +2730,44 @@ cssPrefix: pf-v6-c-button
1215
2730
  aria-disabled="true"
1216
2731
  >
1217
2732
  <span class="pf-v6-c-button__icon">
1218
- <i class="fas fa-times" aria-hidden="true"></i>
2733
+ <svg
2734
+ class="pf-v6-svg"
2735
+ viewBox="0 0 20 20"
2736
+ fill="currentColor"
2737
+ aria-hidden="true"
2738
+ role="img"
2739
+ width="1em"
2740
+ height="1em"
2741
+ >
2742
+ <path
2743
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2744
+ />
2745
+ </svg>
2746
+ </span>
2747
+ </button>
2748
+
2749
+ <button
2750
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
2751
+ type="button"
2752
+ aria-label="Remove"
2753
+ aria-disabled="true"
2754
+ >
2755
+ <span class="pf-v6-c-button__icon pf-m-start">
2756
+ <svg
2757
+ class="pf-v6-svg"
2758
+ viewBox="0 0 352 512"
2759
+ fill="currentColor"
2760
+ aria-hidden="true"
2761
+ role="img"
2762
+ width="1em"
2763
+ height="1em"
2764
+ >
2765
+ <path
2766
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2767
+ />
2768
+ </svg>
1219
2769
  </span>
2770
+ <span class="pf-v6-c-button__text">Plain with text</span>
1220
2771
  </button>
1221
2772
 
1222
2773
  <br />
@@ -1237,7 +2788,19 @@ cssPrefix: pf-v6-c-button
1237
2788
  aria-disabled="true"
1238
2789
  >
1239
2790
  <span class="pf-v6-c-button__icon">
1240
- <i class="fas fa-copy" aria-hidden="true"></i>
2791
+ <svg
2792
+ class="pf-v6-svg"
2793
+ viewBox="0 0 32 32"
2794
+ fill="currentColor"
2795
+ aria-hidden="true"
2796
+ role="img"
2797
+ width="1em"
2798
+ height="1em"
2799
+ >
2800
+ <path
2801
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2802
+ />
2803
+ </svg>
1241
2804
  </span>
1242
2805
  </button>
1243
2806
 
@@ -1253,7 +2816,19 @@ cssPrefix: pf-v6-c-button
1253
2816
  aria-disabled="true"
1254
2817
  >
1255
2818
  <span class="pf-v6-c-button__icon pf-m-start">
1256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2819
+ <svg
2820
+ class="pf-v6-svg"
2821
+ viewBox="0 0 32 32"
2822
+ fill="currentColor"
2823
+ aria-hidden="true"
2824
+ role="img"
2825
+ width="1em"
2826
+ height="1em"
2827
+ >
2828
+ <path
2829
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2830
+ />
2831
+ </svg>
1257
2832
  </span>
1258
2833
  <span class="pf-v6-c-button__text">Primary</span>
1259
2834
  </button>
@@ -1264,7 +2839,19 @@ cssPrefix: pf-v6-c-button
1264
2839
  aria-disabled="true"
1265
2840
  >
1266
2841
  <span class="pf-v6-c-button__icon pf-m-start">
1267
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2842
+ <svg
2843
+ class="pf-v6-svg"
2844
+ viewBox="0 0 32 32"
2845
+ fill="currentColor"
2846
+ aria-hidden="true"
2847
+ role="img"
2848
+ width="1em"
2849
+ height="1em"
2850
+ >
2851
+ <path
2852
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2853
+ />
2854
+ </svg>
1268
2855
  </span>
1269
2856
  <span class="pf-v6-c-button__text">Secondary</span>
1270
2857
  </button>
@@ -1275,7 +2862,19 @@ cssPrefix: pf-v6-c-button
1275
2862
  aria-disabled="true"
1276
2863
  >
1277
2864
  <span class="pf-v6-c-button__icon pf-m-start">
1278
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2865
+ <svg
2866
+ class="pf-v6-svg"
2867
+ viewBox="0 0 32 32"
2868
+ fill="currentColor"
2869
+ aria-hidden="true"
2870
+ role="img"
2871
+ width="1em"
2872
+ height="1em"
2873
+ >
2874
+ <path
2875
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2876
+ />
2877
+ </svg>
1279
2878
  </span>
1280
2879
  <span class="pf-v6-c-button__text">Secondary danger</span>
1281
2880
  </button>
@@ -1286,7 +2885,19 @@ cssPrefix: pf-v6-c-button
1286
2885
  aria-disabled="true"
1287
2886
  >
1288
2887
  <span class="pf-v6-c-button__icon pf-m-start">
1289
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2888
+ <svg
2889
+ class="pf-v6-svg"
2890
+ viewBox="0 0 32 32"
2891
+ fill="currentColor"
2892
+ aria-hidden="true"
2893
+ role="img"
2894
+ width="1em"
2895
+ height="1em"
2896
+ >
2897
+ <path
2898
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2899
+ />
2900
+ </svg>
1290
2901
  </span>
1291
2902
  <span class="pf-v6-c-button__text">Tertiary</span>
1292
2903
  </button>
@@ -1297,7 +2908,19 @@ cssPrefix: pf-v6-c-button
1297
2908
  aria-disabled="true"
1298
2909
  >
1299
2910
  <span class="pf-v6-c-button__icon pf-m-start">
1300
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2911
+ <svg
2912
+ class="pf-v6-svg"
2913
+ viewBox="0 0 32 32"
2914
+ fill="currentColor"
2915
+ aria-hidden="true"
2916
+ role="img"
2917
+ width="1em"
2918
+ height="1em"
2919
+ >
2920
+ <path
2921
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2922
+ />
2923
+ </svg>
1301
2924
  </span>
1302
2925
  <span class="pf-v6-c-button__text">Danger</span>
1303
2926
  </button>
@@ -1308,7 +2931,19 @@ cssPrefix: pf-v6-c-button
1308
2931
  aria-disabled="true"
1309
2932
  >
1310
2933
  <span class="pf-v6-c-button__icon pf-m-start">
1311
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2934
+ <svg
2935
+ class="pf-v6-svg"
2936
+ viewBox="0 0 32 32"
2937
+ fill="currentColor"
2938
+ aria-hidden="true"
2939
+ role="img"
2940
+ width="1em"
2941
+ height="1em"
2942
+ >
2943
+ <path
2944
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2945
+ />
2946
+ </svg>
1312
2947
  </span>
1313
2948
  <span class="pf-v6-c-button__text">Warning</span>
1314
2949
  </button>
@@ -1322,7 +2957,19 @@ cssPrefix: pf-v6-c-button
1322
2957
  aria-disabled="true"
1323
2958
  >
1324
2959
  <span class="pf-v6-c-button__icon pf-m-start">
1325
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2960
+ <svg
2961
+ class="pf-v6-svg"
2962
+ viewBox="0 0 32 32"
2963
+ fill="currentColor"
2964
+ aria-hidden="true"
2965
+ role="img"
2966
+ width="1em"
2967
+ height="1em"
2968
+ >
2969
+ <path
2970
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2971
+ />
2972
+ </svg>
1326
2973
  </span>
1327
2974
  <span class="pf-v6-c-button__text">Link</span>
1328
2975
  </button>
@@ -1333,7 +2980,19 @@ cssPrefix: pf-v6-c-button
1333
2980
  aria-disabled="true"
1334
2981
  >
1335
2982
  <span class="pf-v6-c-button__icon pf-m-start">
1336
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2983
+ <svg
2984
+ class="pf-v6-svg"
2985
+ viewBox="0 0 32 32"
2986
+ fill="currentColor"
2987
+ aria-hidden="true"
2988
+ role="img"
2989
+ width="1em"
2990
+ height="1em"
2991
+ >
2992
+ <path
2993
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2994
+ />
2995
+ </svg>
1337
2996
  </span>
1338
2997
  <span class="pf-v6-c-button__text">Link danger</span>
1339
2998
  </button>
@@ -1344,7 +3003,19 @@ cssPrefix: pf-v6-c-button
1344
3003
  aria-disabled="true"
1345
3004
  >
1346
3005
  <span class="pf-v6-c-button__icon pf-m-start">
1347
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3006
+ <svg
3007
+ class="pf-v6-svg"
3008
+ viewBox="0 0 32 32"
3009
+ fill="currentColor"
3010
+ aria-hidden="true"
3011
+ role="img"
3012
+ width="1em"
3013
+ height="1em"
3014
+ >
3015
+ <path
3016
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3017
+ />
3018
+ </svg>
1348
3019
  </span>
1349
3020
  <span class="pf-v6-c-button__text">Inline link</span>
1350
3021
  </button>
@@ -1356,8 +3027,44 @@ cssPrefix: pf-v6-c-button
1356
3027
  aria-disabled="true"
1357
3028
  >
1358
3029
  <span class="pf-v6-c-button__icon">
1359
- <i class="fas fa-times" aria-hidden="true"></i>
3030
+ <svg
3031
+ class="pf-v6-svg"
3032
+ viewBox="0 0 20 20"
3033
+ fill="currentColor"
3034
+ aria-hidden="true"
3035
+ role="img"
3036
+ width="1em"
3037
+ height="1em"
3038
+ >
3039
+ <path
3040
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3041
+ />
3042
+ </svg>
3043
+ </span>
3044
+ </button>
3045
+
3046
+ <button
3047
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3048
+ type="button"
3049
+ aria-label="Remove"
3050
+ aria-disabled="true"
3051
+ >
3052
+ <span class="pf-v6-c-button__icon pf-m-start">
3053
+ <svg
3054
+ class="pf-v6-svg"
3055
+ viewBox="0 0 352 512"
3056
+ fill="currentColor"
3057
+ aria-hidden="true"
3058
+ role="img"
3059
+ width="1em"
3060
+ height="1em"
3061
+ >
3062
+ <path
3063
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
3064
+ />
3065
+ </svg>
1360
3066
  </span>
3067
+ <span class="pf-v6-c-button__text">Plain with text</span>
1361
3068
  </button>
1362
3069
 
1363
3070
  <br />
@@ -1369,7 +3076,19 @@ cssPrefix: pf-v6-c-button
1369
3076
  aria-disabled="true"
1370
3077
  >
1371
3078
  <span class="pf-v6-c-button__icon pf-m-start">
1372
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3079
+ <svg
3080
+ class="pf-v6-svg"
3081
+ viewBox="0 0 32 32"
3082
+ fill="currentColor"
3083
+ aria-hidden="true"
3084
+ role="img"
3085
+ width="1em"
3086
+ height="1em"
3087
+ >
3088
+ <path
3089
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3090
+ />
3091
+ </svg>
1373
3092
  </span>
1374
3093
  <span class="pf-v6-c-button__text">Control</span>
1375
3094
  </button>
@@ -1381,7 +3100,19 @@ cssPrefix: pf-v6-c-button
1381
3100
  aria-disabled="true"
1382
3101
  >
1383
3102
  <span class="pf-v6-c-button__icon">
1384
- <i class="fas fa-copy" aria-hidden="true"></i>
3103
+ <svg
3104
+ class="pf-v6-svg"
3105
+ viewBox="0 0 32 32"
3106
+ fill="currentColor"
3107
+ aria-hidden="true"
3108
+ role="img"
3109
+ width="1em"
3110
+ height="1em"
3111
+ >
3112
+ <path
3113
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
3114
+ />
3115
+ </svg>
1385
3116
  </span>
1386
3117
  </button>
1387
3118
 
@@ -1398,7 +3129,19 @@ cssPrefix: pf-v6-c-button
1398
3129
  >
1399
3130
  <span class="pf-v6-c-button__text">Primary</span>
1400
3131
  <span class="pf-v6-c-button__icon pf-m-end">
1401
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3132
+ <svg
3133
+ class="pf-v6-svg"
3134
+ viewBox="0 0 32 32"
3135
+ fill="currentColor"
3136
+ aria-hidden="true"
3137
+ role="img"
3138
+ width="1em"
3139
+ height="1em"
3140
+ >
3141
+ <path
3142
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3143
+ />
3144
+ </svg>
1402
3145
  </span>
1403
3146
  </button>
1404
3147
 
@@ -1409,7 +3152,19 @@ cssPrefix: pf-v6-c-button
1409
3152
  >
1410
3153
  <span class="pf-v6-c-button__text">Secondary</span>
1411
3154
  <span class="pf-v6-c-button__icon pf-m-end">
1412
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3155
+ <svg
3156
+ class="pf-v6-svg"
3157
+ viewBox="0 0 32 32"
3158
+ fill="currentColor"
3159
+ aria-hidden="true"
3160
+ role="img"
3161
+ width="1em"
3162
+ height="1em"
3163
+ >
3164
+ <path
3165
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3166
+ />
3167
+ </svg>
1413
3168
  </span>
1414
3169
  </button>
1415
3170
 
@@ -1420,7 +3175,19 @@ cssPrefix: pf-v6-c-button
1420
3175
  >
1421
3176
  <span class="pf-v6-c-button__text">Secondary danger</span>
1422
3177
  <span class="pf-v6-c-button__icon pf-m-end">
1423
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3178
+ <svg
3179
+ class="pf-v6-svg"
3180
+ viewBox="0 0 32 32"
3181
+ fill="currentColor"
3182
+ aria-hidden="true"
3183
+ role="img"
3184
+ width="1em"
3185
+ height="1em"
3186
+ >
3187
+ <path
3188
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3189
+ />
3190
+ </svg>
1424
3191
  </span>
1425
3192
  </button>
1426
3193
 
@@ -1431,7 +3198,19 @@ cssPrefix: pf-v6-c-button
1431
3198
  >
1432
3199
  <span class="pf-v6-c-button__text">Tertiary</span>
1433
3200
  <span class="pf-v6-c-button__icon pf-m-end">
1434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3201
+ <svg
3202
+ class="pf-v6-svg"
3203
+ viewBox="0 0 32 32"
3204
+ fill="currentColor"
3205
+ aria-hidden="true"
3206
+ role="img"
3207
+ width="1em"
3208
+ height="1em"
3209
+ >
3210
+ <path
3211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3212
+ />
3213
+ </svg>
1435
3214
  </span>
1436
3215
  </button>
1437
3216
 
@@ -1442,7 +3221,19 @@ cssPrefix: pf-v6-c-button
1442
3221
  >
1443
3222
  <span class="pf-v6-c-button__text">Danger</span>
1444
3223
  <span class="pf-v6-c-button__icon pf-m-end">
1445
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3224
+ <svg
3225
+ class="pf-v6-svg"
3226
+ viewBox="0 0 32 32"
3227
+ fill="currentColor"
3228
+ aria-hidden="true"
3229
+ role="img"
3230
+ width="1em"
3231
+ height="1em"
3232
+ >
3233
+ <path
3234
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3235
+ />
3236
+ </svg>
1446
3237
  </span>
1447
3238
  </button>
1448
3239
 
@@ -1453,7 +3244,19 @@ cssPrefix: pf-v6-c-button
1453
3244
  >
1454
3245
  <span class="pf-v6-c-button__text">Warning</span>
1455
3246
  <span class="pf-v6-c-button__icon pf-m-end">
1456
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3247
+ <svg
3248
+ class="pf-v6-svg"
3249
+ viewBox="0 0 32 32"
3250
+ fill="currentColor"
3251
+ aria-hidden="true"
3252
+ role="img"
3253
+ width="1em"
3254
+ height="1em"
3255
+ >
3256
+ <path
3257
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3258
+ />
3259
+ </svg>
1457
3260
  </span>
1458
3261
  </button>
1459
3262
 
@@ -1467,7 +3270,19 @@ cssPrefix: pf-v6-c-button
1467
3270
  >
1468
3271
  <span class="pf-v6-c-button__text">Link</span>
1469
3272
  <span class="pf-v6-c-button__icon pf-m-end">
1470
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3273
+ <svg
3274
+ class="pf-v6-svg"
3275
+ viewBox="0 0 32 32"
3276
+ fill="currentColor"
3277
+ aria-hidden="true"
3278
+ role="img"
3279
+ width="1em"
3280
+ height="1em"
3281
+ >
3282
+ <path
3283
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3284
+ />
3285
+ </svg>
1471
3286
  </span>
1472
3287
  </button>
1473
3288
 
@@ -1478,7 +3293,19 @@ cssPrefix: pf-v6-c-button
1478
3293
  >
1479
3294
  <span class="pf-v6-c-button__text">Link danger</span>
1480
3295
  <span class="pf-v6-c-button__icon pf-m-end">
1481
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3296
+ <svg
3297
+ class="pf-v6-svg"
3298
+ viewBox="0 0 32 32"
3299
+ fill="currentColor"
3300
+ aria-hidden="true"
3301
+ role="img"
3302
+ width="1em"
3303
+ height="1em"
3304
+ >
3305
+ <path
3306
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3307
+ />
3308
+ </svg>
1482
3309
  </span>
1483
3310
  </button>
1484
3311
 
@@ -1489,7 +3316,19 @@ cssPrefix: pf-v6-c-button
1489
3316
  >
1490
3317
  <span class="pf-v6-c-button__text">Inline link</span>
1491
3318
  <span class="pf-v6-c-button__icon pf-m-end">
1492
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3319
+ <svg
3320
+ class="pf-v6-svg"
3321
+ viewBox="0 0 32 32"
3322
+ fill="currentColor"
3323
+ aria-hidden="true"
3324
+ role="img"
3325
+ width="1em"
3326
+ height="1em"
3327
+ >
3328
+ <path
3329
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3330
+ />
3331
+ </svg>
1493
3332
  </span>
1494
3333
  </button>
1495
3334
 
@@ -1500,7 +3339,43 @@ cssPrefix: pf-v6-c-button
1500
3339
  aria-disabled="true"
1501
3340
  >
1502
3341
  <span class="pf-v6-c-button__icon">
1503
- <i class="fas fa-times" aria-hidden="true"></i>
3342
+ <svg
3343
+ class="pf-v6-svg"
3344
+ viewBox="0 0 20 20"
3345
+ fill="currentColor"
3346
+ aria-hidden="true"
3347
+ role="img"
3348
+ width="1em"
3349
+ height="1em"
3350
+ >
3351
+ <path
3352
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3353
+ />
3354
+ </svg>
3355
+ </span>
3356
+ </button>
3357
+
3358
+ <button
3359
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3360
+ type="button"
3361
+ aria-label="Remove"
3362
+ aria-disabled="true"
3363
+ >
3364
+ <span class="pf-v6-c-button__text">Plain with text</span>
3365
+ <span class="pf-v6-c-button__icon pf-m-end">
3366
+ <svg
3367
+ class="pf-v6-svg"
3368
+ viewBox="0 0 352 512"
3369
+ fill="currentColor"
3370
+ aria-hidden="true"
3371
+ role="img"
3372
+ width="1em"
3373
+ height="1em"
3374
+ >
3375
+ <path
3376
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
3377
+ />
3378
+ </svg>
1504
3379
  </span>
1505
3380
  </button>
1506
3381
 
@@ -1514,7 +3389,19 @@ cssPrefix: pf-v6-c-button
1514
3389
  >
1515
3390
  <span class="pf-v6-c-button__text">Control</span>
1516
3391
  <span class="pf-v6-c-button__icon pf-m-end">
1517
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3392
+ <svg
3393
+ class="pf-v6-svg"
3394
+ viewBox="0 0 32 32"
3395
+ fill="currentColor"
3396
+ aria-hidden="true"
3397
+ role="img"
3398
+ width="1em"
3399
+ height="1em"
3400
+ >
3401
+ <path
3402
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3403
+ />
3404
+ </svg>
1518
3405
  </span>
1519
3406
  </button>
1520
3407
 
@@ -1525,7 +3412,19 @@ cssPrefix: pf-v6-c-button
1525
3412
  aria-disabled="true"
1526
3413
  >
1527
3414
  <span class="pf-v6-c-button__icon">
1528
- <i class="fas fa-copy" aria-hidden="true"></i>
3415
+ <svg
3416
+ class="pf-v6-svg"
3417
+ viewBox="0 0 32 32"
3418
+ fill="currentColor"
3419
+ aria-hidden="true"
3420
+ role="img"
3421
+ width="1em"
3422
+ height="1em"
3423
+ >
3424
+ <path
3425
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
3426
+ />
3427
+ </svg>
1529
3428
  </span>
1530
3429
  </button>
1531
3430
 
@@ -1595,7 +3494,19 @@ cssPrefix: pf-v6-c-button
1595
3494
  aria-label="Remove"
1596
3495
  >
1597
3496
  <span class="pf-v6-c-button__icon">
1598
- <i class="fas fa-times" aria-hidden="true"></i>
3497
+ <svg
3498
+ class="pf-v6-svg"
3499
+ viewBox="0 0 20 20"
3500
+ fill="currentColor"
3501
+ aria-hidden="true"
3502
+ role="img"
3503
+ width="1em"
3504
+ height="1em"
3505
+ >
3506
+ <path
3507
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3508
+ />
3509
+ </svg>
1599
3510
  </span>
1600
3511
  </span>
1601
3512
  <br />
@@ -1610,7 +3521,19 @@ cssPrefix: pf-v6-c-button
1610
3521
  aria-label="Remove"
1611
3522
  >
1612
3523
  <span class="pf-v6-c-button__icon">
1613
- <i class="fas fa-times" aria-hidden="true"></i>
3524
+ <svg
3525
+ class="pf-v6-svg"
3526
+ viewBox="0 0 20 20"
3527
+ fill="currentColor"
3528
+ aria-hidden="true"
3529
+ role="img"
3530
+ width="1em"
3531
+ height="1em"
3532
+ >
3533
+ <path
3534
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3535
+ />
3536
+ </svg>
1614
3537
  </span>
1615
3538
  </span>
1616
3539
  <br />
@@ -1675,7 +3598,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1675
3598
  <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button">
1676
3599
  <span class="pf-v6-c-button__text">Call to action</span>
1677
3600
  <span class="pf-v6-c-button__icon pf-m-end">
1678
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3601
+ <svg
3602
+ class="pf-v6-svg"
3603
+ viewBox="0 0 32 32"
3604
+ fill="currentColor"
3605
+ aria-hidden="true"
3606
+ role="img"
3607
+ width="1em"
3608
+ height="1em"
3609
+ >
3610
+ <path
3611
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3612
+ />
3613
+ </svg>
1679
3614
  </span>
1680
3615
  </button>
1681
3616
 
@@ -1685,7 +3620,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1685
3620
  >
1686
3621
  <span class="pf-v6-c-button__text">Call to action</span>
1687
3622
  <span class="pf-v6-c-button__icon pf-m-end">
1688
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3623
+ <svg
3624
+ class="pf-v6-svg"
3625
+ viewBox="0 0 32 32"
3626
+ fill="currentColor"
3627
+ aria-hidden="true"
3628
+ role="img"
3629
+ width="1em"
3630
+ height="1em"
3631
+ >
3632
+ <path
3633
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3634
+ />
3635
+ </svg>
1689
3636
  </span>
1690
3637
  </button>
1691
3638
  <br />
@@ -1719,7 +3666,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1719
3666
  <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button" disabled>
1720
3667
  <span class="pf-v6-c-button__text">Call to action</span>
1721
3668
  <span class="pf-v6-c-button__icon pf-m-end">
1722
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3669
+ <svg
3670
+ class="pf-v6-svg"
3671
+ viewBox="0 0 32 32"
3672
+ fill="currentColor"
3673
+ aria-hidden="true"
3674
+ role="img"
3675
+ width="1em"
3676
+ height="1em"
3677
+ >
3678
+ <path
3679
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3680
+ />
3681
+ </svg>
1723
3682
  </span>
1724
3683
  </button>
1725
3684
 
@@ -1730,7 +3689,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1730
3689
  >
1731
3690
  <span class="pf-v6-c-button__text">Call to action</span>
1732
3691
  <span class="pf-v6-c-button__icon pf-m-end">
1733
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3692
+ <svg
3693
+ class="pf-v6-svg"
3694
+ viewBox="0 0 32 32"
3695
+ fill="currentColor"
3696
+ aria-hidden="true"
3697
+ role="img"
3698
+ width="1em"
3699
+ height="1em"
3700
+ >
3701
+ <path
3702
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3703
+ />
3704
+ </svg>
1734
3705
  </span>
1735
3706
  </button>
1736
3707
 
@@ -1785,7 +3756,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1785
3756
  <br />
1786
3757
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
1787
3758
  <span class="pf-v6-c-button__icon">
1788
- <i class="fas fa-upload" aria-hidden="true"></i>
3759
+ <svg
3760
+ class="pf-v6-svg"
3761
+ viewBox="0 0 32 32"
3762
+ fill="currentColor"
3763
+ aria-hidden="true"
3764
+ role="img"
3765
+ width="1em"
3766
+ height="1em"
3767
+ >
3768
+ <path
3769
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
3770
+ />
3771
+ </svg>
1789
3772
  </span>
1790
3773
  </button>
1791
3774
 
@@ -1802,7 +3785,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1802
3785
  </span>
1803
3786
 
1804
3787
  <span class="pf-v6-c-button__icon">
1805
- <i class="fas fa-upload" aria-hidden="true"></i>
3788
+ <svg
3789
+ class="pf-v6-svg"
3790
+ viewBox="0 0 32 32"
3791
+ fill="currentColor"
3792
+ aria-hidden="true"
3793
+ role="img"
3794
+ width="1em"
3795
+ height="1em"
3796
+ >
3797
+ <path
3798
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
3799
+ />
3800
+ </svg>
1806
3801
  </span>
1807
3802
  </button>
1808
3803
  <br />
@@ -1842,7 +3837,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1842
3837
  aria-label="Add primary circle variant"
1843
3838
  >
1844
3839
  <span class="pf-v6-c-button__icon pf-m-start">
1845
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3840
+ <svg
3841
+ class="pf-v6-svg"
3842
+ viewBox="0 0 32 32"
3843
+ fill="currentColor"
3844
+ aria-hidden="true"
3845
+ role="img"
3846
+ width="1em"
3847
+ height="1em"
3848
+ >
3849
+ <path
3850
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3851
+ />
3852
+ </svg>
1846
3853
  </span>
1847
3854
  </button>
1848
3855
 
@@ -1852,7 +3859,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1852
3859
  aria-label="Add secondary circle variant"
1853
3860
  >
1854
3861
  <span class="pf-v6-c-button__icon pf-m-start">
1855
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3862
+ <svg
3863
+ class="pf-v6-svg"
3864
+ viewBox="0 0 32 32"
3865
+ fill="currentColor"
3866
+ aria-hidden="true"
3867
+ role="img"
3868
+ width="1em"
3869
+ height="1em"
3870
+ >
3871
+ <path
3872
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3873
+ />
3874
+ </svg>
1856
3875
  </span>
1857
3876
  </button>
1858
3877
 
@@ -1862,7 +3881,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1862
3881
  aria-label="Add tertiary circle variant"
1863
3882
  >
1864
3883
  <span class="pf-v6-c-button__icon pf-m-start">
1865
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3884
+ <svg
3885
+ class="pf-v6-svg"
3886
+ viewBox="0 0 32 32"
3887
+ fill="currentColor"
3888
+ aria-hidden="true"
3889
+ role="img"
3890
+ width="1em"
3891
+ height="1em"
3892
+ >
3893
+ <path
3894
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3895
+ />
3896
+ </svg>
1866
3897
  </span>
1867
3898
  </button>
1868
3899
 
@@ -1872,7 +3903,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1872
3903
  aria-label="Add danger circle variant"
1873
3904
  >
1874
3905
  <span class="pf-v6-c-button__icon pf-m-start">
1875
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3906
+ <svg
3907
+ class="pf-v6-svg"
3908
+ viewBox="0 0 32 32"
3909
+ fill="currentColor"
3910
+ aria-hidden="true"
3911
+ role="img"
3912
+ width="1em"
3913
+ height="1em"
3914
+ >
3915
+ <path
3916
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3917
+ />
3918
+ </svg>
1876
3919
  </span>
1877
3920
  </button>
1878
3921
 
@@ -1882,7 +3925,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1882
3925
  aria-label="Add warning circle variant"
1883
3926
  >
1884
3927
  <span class="pf-v6-c-button__icon pf-m-start">
1885
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3928
+ <svg
3929
+ class="pf-v6-svg"
3930
+ viewBox="0 0 32 32"
3931
+ fill="currentColor"
3932
+ aria-hidden="true"
3933
+ role="img"
3934
+ width="1em"
3935
+ height="1em"
3936
+ >
3937
+ <path
3938
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3939
+ />
3940
+ </svg>
1886
3941
  </span>
1887
3942
  </button>
1888
3943
 
@@ -1892,7 +3947,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1892
3947
  aria-label="Add link circle variant"
1893
3948
  >
1894
3949
  <span class="pf-v6-c-button__icon pf-m-start">
1895
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3950
+ <svg
3951
+ class="pf-v6-svg"
3952
+ viewBox="0 0 32 32"
3953
+ fill="currentColor"
3954
+ aria-hidden="true"
3955
+ role="img"
3956
+ width="1em"
3957
+ height="1em"
3958
+ >
3959
+ <path
3960
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3961
+ />
3962
+ </svg>
1896
3963
  </span>
1897
3964
  </button>
1898
3965
 
@@ -1902,7 +3969,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1902
3969
  aria-label="Remove plain circle variant"
1903
3970
  >
1904
3971
  <span class="pf-v6-c-button__icon pf-m-start">
1905
- <i class="fas fa-times" aria-hidden="true"></i>
3972
+ <svg
3973
+ class="pf-v6-svg"
3974
+ viewBox="0 0 20 20"
3975
+ fill="currentColor"
3976
+ aria-hidden="true"
3977
+ role="img"
3978
+ width="1em"
3979
+ height="1em"
3980
+ >
3981
+ <path
3982
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3983
+ />
3984
+ </svg>
1906
3985
  </span>
1907
3986
  </button>
1908
3987
 
@@ -1912,7 +3991,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1912
3991
  aria-label="Copy control circle variant"
1913
3992
  >
1914
3993
  <span class="pf-v6-c-button__icon pf-m-start">
1915
- <i class="fas fa-copy" aria-hidden="true"></i>
3994
+ <svg
3995
+ class="pf-v6-svg"
3996
+ viewBox="0 0 32 32"
3997
+ fill="currentColor"
3998
+ aria-hidden="true"
3999
+ role="img"
4000
+ width="1em"
4001
+ height="1em"
4002
+ >
4003
+ <path
4004
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
4005
+ />
4006
+ </svg>
1916
4007
  </span>
1917
4008
  </button>
1918
4009
 
@@ -1922,7 +4013,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1922
4013
  aria-label="Upload circle variant"
1923
4014
  >
1924
4015
  <span class="pf-v6-c-button__icon">
1925
- <i class="fas fa-upload" aria-hidden="true"></i>
4016
+ <svg
4017
+ class="pf-v6-svg"
4018
+ viewBox="0 0 32 32"
4019
+ fill="currentColor"
4020
+ aria-hidden="true"
4021
+ role="img"
4022
+ width="1em"
4023
+ height="1em"
4024
+ >
4025
+ <path
4026
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
4027
+ />
4028
+ </svg>
1926
4029
  </span>
1927
4030
  </button>
1928
4031
 
@@ -1942,7 +4045,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1942
4045
  </span>
1943
4046
 
1944
4047
  <span class="pf-v6-c-button__icon">
1945
- <i class="fas fa-upload" aria-hidden="true"></i>
4048
+ <svg
4049
+ class="pf-v6-svg"
4050
+ viewBox="0 0 32 32"
4051
+ fill="currentColor"
4052
+ aria-hidden="true"
4053
+ role="img"
4054
+ width="1em"
4055
+ height="1em"
4056
+ >
4057
+ <path
4058
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
4059
+ />
4060
+ </svg>
1946
4061
  </span>
1947
4062
  </button>
1948
4063
 
@@ -2023,7 +4138,7 @@ For when a plain/icon button is placed inline with text
2023
4138
  <span class="pf-v6-c-button__icon">
2024
4139
  <svg
2025
4140
  class="pf-v6-svg"
2026
- viewBox="0 0 1024 1024"
4141
+ viewBox="0 0 32 32"
2027
4142
  fill="currentColor"
2028
4143
  aria-hidden="true"
2029
4144
  role="img"
@@ -2031,7 +4146,7 @@ For when a plain/icon button is placed inline with text
2031
4146
  height="1em"
2032
4147
  >
2033
4148
  <path
2034
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
4149
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
2035
4150
  />
2036
4151
  </svg>
2037
4152
  </span>
@@ -2047,7 +4162,19 @@ For when a plain/icon button is placed inline with text
2047
4162
  <br />
2048
4163
  <button class="pf-v6-c-button pf-m-read pf-m-stateful" type="button">
2049
4164
  <span class="pf-v6-c-button__icon pf-m-start">
2050
- <i class="fas fa-bell" aria-hidden="true"></i>
4165
+ <svg
4166
+ class="pf-v6-svg"
4167
+ viewBox="0 0 32 32"
4168
+ fill="currentColor"
4169
+ aria-hidden="true"
4170
+ role="img"
4171
+ width="1em"
4172
+ height="1em"
4173
+ >
4174
+ <path
4175
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4176
+ />
4177
+ </svg>
2051
4178
  </span>
2052
4179
  <span class="pf-v6-c-button__text">
2053
4180
  10
@@ -2060,7 +4187,19 @@ For when a plain/icon button is placed inline with text
2060
4187
  type="button"
2061
4188
  >
2062
4189
  <span class="pf-v6-c-button__icon pf-m-start">
2063
- <i class="fas fa-bell" aria-hidden="true"></i>
4190
+ <svg
4191
+ class="pf-v6-svg"
4192
+ viewBox="0 0 32 32"
4193
+ fill="currentColor"
4194
+ aria-hidden="true"
4195
+ role="img"
4196
+ width="1em"
4197
+ height="1em"
4198
+ >
4199
+ <path
4200
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4201
+ />
4202
+ </svg>
2064
4203
  </span>
2065
4204
  <span class="pf-v6-c-button__text">
2066
4205
  10
@@ -2075,7 +4214,19 @@ For when a plain/icon button is placed inline with text
2075
4214
  <br />
2076
4215
  <button class="pf-v6-c-button pf-m-unread pf-m-stateful" type="button">
2077
4216
  <span class="pf-v6-c-button__icon pf-m-start">
2078
- <i class="fas fa-bell" aria-hidden="true"></i>
4217
+ <svg
4218
+ class="pf-v6-svg"
4219
+ viewBox="0 0 32 32"
4220
+ fill="currentColor"
4221
+ aria-hidden="true"
4222
+ role="img"
4223
+ width="1em"
4224
+ height="1em"
4225
+ >
4226
+ <path
4227
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4228
+ />
4229
+ </svg>
2079
4230
  </span>
2080
4231
  <span class="pf-v6-c-button__text">
2081
4232
  10
@@ -2088,7 +4239,19 @@ For when a plain/icon button is placed inline with text
2088
4239
  type="button"
2089
4240
  >
2090
4241
  <span class="pf-v6-c-button__icon pf-m-start">
2091
- <i class="fas fa-bell" aria-hidden="true"></i>
4242
+ <svg
4243
+ class="pf-v6-svg"
4244
+ viewBox="0 0 32 32"
4245
+ fill="currentColor"
4246
+ aria-hidden="true"
4247
+ role="img"
4248
+ width="1em"
4249
+ height="1em"
4250
+ >
4251
+ <path
4252
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4253
+ />
4254
+ </svg>
2092
4255
  </span>
2093
4256
  <span class="pf-v6-c-button__text">
2094
4257
  10
@@ -2103,7 +4266,19 @@ For when a plain/icon button is placed inline with text
2103
4266
  <br />
2104
4267
  <button class="pf-v6-c-button pf-m-attention pf-m-stateful" type="button">
2105
4268
  <span class="pf-v6-c-button__icon pf-m-start">
2106
- <i class="fas fa-bell" aria-hidden="true"></i>
4269
+ <svg
4270
+ class="pf-v6-svg"
4271
+ viewBox="0 0 32 32"
4272
+ fill="currentColor"
4273
+ aria-hidden="true"
4274
+ role="img"
4275
+ width="1em"
4276
+ height="1em"
4277
+ >
4278
+ <path
4279
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4280
+ />
4281
+ </svg>
2107
4282
  </span>
2108
4283
  <span class="pf-v6-c-button__text">
2109
4284
  10
@@ -2116,7 +4291,19 @@ For when a plain/icon button is placed inline with text
2116
4291
  type="button"
2117
4292
  >
2118
4293
  <span class="pf-v6-c-button__icon pf-m-start">
2119
- <i class="fas fa-bell" aria-hidden="true"></i>
4294
+ <svg
4295
+ class="pf-v6-svg"
4296
+ viewBox="0 0 32 32"
4297
+ fill="currentColor"
4298
+ aria-hidden="true"
4299
+ role="img"
4300
+ width="1em"
4301
+ height="1em"
4302
+ >
4303
+ <path
4304
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4305
+ />
4306
+ </svg>
2120
4307
  </span>
2121
4308
  <span class="pf-v6-c-button__text">
2122
4309
  10
@@ -2219,7 +4406,19 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2219
4406
  aria-label="Settings"
2220
4407
  >
2221
4408
  <span class="pf-v6-c-button__icon">
2222
- <i class="fas fa-cog" aria-hidden="true"></i>
4409
+ <svg
4410
+ class="pf-v6-svg"
4411
+ viewBox="0 0 32 32"
4412
+ fill="currentColor"
4413
+ aria-hidden="true"
4414
+ role="img"
4415
+ width="1em"
4416
+ height="1em"
4417
+ >
4418
+ <path
4419
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
4420
+ />
4421
+ </svg>
2223
4422
  </span>
2224
4423
  </button>
2225
4424