@public-ui/sample-react 4.0.0-alpha.9 → 4.0.0-beta.0

package/public/assets/kolicons/style.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: "kolicons";
+  src: url('kolicons.eot?t=1766164320249'); /* IE9*/
+  src: url('kolicons.eot?t=1766164320249#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("kolicons.woff2?t=1766164320249") format("woff2"),
+  url("kolicons.woff?t=1766164320249") format("woff"),
+  url('kolicons.ttf?t=1766164320249') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('kolicons.svg?t=1766164320249#kolicons') format('svg'); /* iOS 4.1- */
+}
+
+[class^="kolicon-"], [class*=" kolicon-"] {
+  font-family: 'kolicons' !important;
+  font-size: 16px;
+  font-style:normal;
+  line-height: 1em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.kolicon-alert-error::before { content: "\ea01"; }
+.kolicon-alert-info::before { content: "\ea02"; }
+.kolicon-alert-success::before { content: "\ea03"; }
+.kolicon-alert-warning::before { content: "\ea04"; }
+.kolicon-check::before { content: "\ea05"; }
+.kolicon-chevron-double-left::before { content: "\ea06"; }
+.kolicon-chevron-double-right::before { content: "\ea07"; }
+.kolicon-chevron-down::before { content: "\ea08"; }
+.kolicon-chevron-left::before { content: "\ea09"; }
+.kolicon-chevron-right::before { content: "\ea0a"; }
+.kolicon-chevron-up::before { content: "\ea0b"; }
+.kolicon-cogwheel::before { content: "\ea0c"; }
+.kolicon-cross::before { content: "\ea0d"; }
+.kolicon-eye-closed::before { content: "\ea0e"; }
+.kolicon-eye::before { content: "\ea0f"; }
+.kolicon-kolibri::before { content: "\ea10"; }
+.kolicon-link-external::before { content: "\ea11"; }
+.kolicon-link::before { content: "\ea12"; }
+.kolicon-minus::before { content: "\ea13"; }
+.kolicon-plus::before { content: "\ea14"; }
+.kolicon-settings::before { content: "\ea15"; }
+.kolicon-sort-asc::before { content: "\ea16"; }
+.kolicon-sort-desc::before { content: "\ea17"; }
+.kolicon-sort-neutral::before { content: "\ea18"; }
+.kolicon-version::before { content: "\ea19"; }

package/src/components/FormWrap.tsx

@@ -9,12 +9,12 @@ export const FormWrap = <P,>({ RefComponent: Component, showButtons = true, ...p
 				<Component {...props} />
 				{showButtons && (
 					<div className="flex gap-4">
-						<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+						<KolButton _label="Submit" _icons="kolicon-chevron-right" _type="submit" _variant="primary" />
 						<KolButton
 							_label="Bunte Icons"
 							_icons={{
-								left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
-								right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
+								left: { icon: 'fa-solid fa-heart', style: { color: '#cc006e' } },
+								right: { icon: 'kolicon-kolibri', style: { color: '#b41b1b' } },
 							}}
 							_type="submit"
 							_variant="secondary"

package/src/components/Sidebar.tsx

@@ -79,11 +79,11 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
-					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
+					<KolButton _icons="kolicon-chevron-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
 					<span className="text-base text-center">
 						{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
 					</span>
-					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
+					<KolButton _icons="kolicon-chevron-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
 				<Navigation routes={routes} />
 			</div>

package/src/components/badge/basic.tsx

@@ -15,8 +15,8 @@ export const BadgeBasic: FC = () => (
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>
-			<KolBadge _color="#ae0000" _label="red with icon" _icons="codicon codicon-smiley"></KolBadge>
-			<KolBadge _color="#8b008b" _label="purple with icon" _icons="codicon codicon-squirrel"></KolBadge>
+			<KolBadge _color="#ae0000" _label="red with icon" _icons="fa-solid fa-face-smile"></KolBadge>
+			<KolBadge _color="#8b008b" _label="purple with icon" _icons="kolicon-kolibri"></KolBadge>
 		</div>
 	</>
 );

package/src/components/badge/button.tsx

@@ -8,7 +8,7 @@ const createBadgeProps = (label: string) => ({
 	_label: label,
 	_smartButton: {
 		_ariaDescription: label,
-		_icons: 'codicon codicon-close',
+		_icons: 'kolicon-cross',
 		_label: `Remove`,
 		_on: {
 			onClick: () => alert('clicked'),
@@ -28,8 +28,8 @@ export const BadgeButton: FC = () => (
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>
-			<KolBadge _color="#ae0000" _icons="codicon codicon-smiley" {...createBadgeProps('red with icon')}></KolBadge>
-			<KolBadge _color="#8b008b" _icons="codicon codicon-squirrel" {...createBadgeProps('purple with icon')}></KolBadge>
+			<KolBadge _color="#ae0000" _icons="fa-solid fa-face-smile" {...createBadgeProps('red with icon')}></KolBadge>
+			<KolBadge _color="#8b008b" _icons="kolicon-kolibri" {...createBadgeProps('purple with icon')}></KolBadge>
 		</div>
 	</>
 );

package/src/components/breadcrumb/basic.tsx

@@ -28,7 +28,7 @@ export const BreadcrumbBasic: FC = () => (
 				_links={[
 					{
 						_label: 'Homepage',
-						_icons: 'codicon codicon-home',
+						_icons: 'fa-solid fa-house',
 						_hideLabel: true,
 						_href: '#/back-page',
 					},
@@ -45,7 +45,7 @@ export const BreadcrumbBasic: FC = () => (
 			<KolBreadcrumb
 				_label="Breadcrumb from icons and text links"
 				_links={[
-					{ _label: 'Homepage', _icons: 'codicon codicon-home', _href: '#/back-page' },
+					{ _label: 'Homepage', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 					{
 						_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',
 						_href: '#/back-page',

package/src/components/button/access-key.tsx

@@ -34,7 +34,7 @@ export const ButtonAccessKey: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Access Key with Hidden Label" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _label="access key without label" _hideLabel _accessKey="a" _icons="codicon codicon-dashboard" _on={dummyEventHandler} />
+						<KolButton _label="access key without label" _hideLabel _accessKey="a" _icons="fa-solid fa-gauge" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -44,8 +44,8 @@ export const ButtonAccessKey: FC = () => {
 						<KolButton
 							_label="with inline icons"
 							_icons={{
-								left: 'codicon codicon-dashboard',
-								right: 'codicon codicon-dashboard',
+								left: 'fa-solid fa-gauge',
+								right: 'fa-solid fa-gauge',
 							}}
 							_accessKey="n"
 							_on={dummyEventHandler}

package/src/components/button/baselined.tsx

@@ -25,7 +25,7 @@ export const ButtonBaselined: FC = () => {
 					<KolHeading _level={2} _label="Vertically Aligned Buttons" />
 					<div className="flex flex-wrap gap-2">
 						<KolButton _label="Label-Text" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-face-smile" _label="Label-Text with Icon" _on={dummyEventHandler} />
 					</div>
 				</section>
 			</div>

package/src/components/button/basic.tsx

@@ -25,12 +25,12 @@ export const ButtonBasic: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Button Variants" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-smile" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -38,9 +38,9 @@ export const ButtonBasic: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Disabled State" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _disabled _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -48,9 +48,9 @@ export const ButtonBasic: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Hidden Label (Icon Only)" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _hideLabel _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -60,22 +60,22 @@ export const ButtonBasic: FC = () => {
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
-								left: 'codicon codicon-arrow-left',
+								left: 'kolicon-chevron-left',
 							}}
 							_label="Icon Left"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								right: 'codicon codicon-arrow-right',
+								right: 'kolicon-chevron-right',
 							}}
 							_label="Icon Right"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								left: 'codicon codicon-arrow-left',
-								right: 'codicon codicon-arrow-right',
+								left: 'kolicon-chevron-left',
+								right: 'kolicon-chevron-right',
 							}}
 							_label="Icons Both Sides"
 							_on={dummyEventHandler}

package/src/components/button/disabled.tsx

@@ -21,20 +21,20 @@ export const ButtonDisabled: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Disabled Buttons" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _disabled _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-robot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-robot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-smile" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
 					</div>
 				</section>
 
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Comparison: Enabled vs Disabled" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="Enabled" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _disabled _icons="codicon codicon-home" _label="Disabled" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-house" _label="Enabled" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="fa-solid fa-house" _label="Disabled" _variant="primary" _on={dummyEventHandler} />
 					</div>
 				</section>
 			</div>

package/src/components/button/expert-slot.tsx

@@ -24,13 +24,13 @@ export const ButtonExpertSlot: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Buttons with Expert Slot Content" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+						<KolButton _icons="fa-solid fa-house" _label="" _variant="primary" _on={dummyEventHandler}>
 							<span slot="expert">I am more than just a button</span>
 						</KolButton>
-						<KolButton _icons="codicon codicon-heart" _label="" _variant="secondary" _on={dummyEventHandler}>
+						<KolButton _icons="fa-solid fa-heart" _label="" _variant="secondary" _on={dummyEventHandler}>
 							<span slot="expert">Custom content here</span>
 						</KolButton>
-						<KolButton _icons="codicon codicon-trash" _label="" _variant="danger" _on={dummyEventHandler}>
+						<KolButton _icons="fa-solid fa-trash" _label="" _variant="danger" _on={dummyEventHandler}>
 							<span slot="expert">Delete with custom text</span>
 						</KolButton>
 					</div>
@@ -39,10 +39,10 @@ export const ButtonExpertSlot: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Disabled Buttons with Expert Slot" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _disabled _icons="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+						<KolButton _disabled _icons="fa-solid fa-house" _label="" _variant="primary" _on={dummyEventHandler}>
 							<span slot="expert">Disabled expert slot</span>
 						</KolButton>
-						<KolButton _disabled _icons="codicon codicon-reactions" _label="" _variant="ghost" _on={dummyEventHandler}>
+						<KolButton _disabled _icons="fa-solid fa-smile" _label="" _variant="ghost" _on={dummyEventHandler}>
 							<span slot="expert">Another disabled one</span>
 						</KolButton>
 					</div>

package/src/components/button/hide-label.tsx

@@ -24,31 +24,31 @@ export const ButtonHideLabel: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Buttons with Hidden Labels" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-settings-gear" _label="Settings" _variant="ghost" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-robot" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-robot" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-smile" _label="Settings" _variant="ghost" _on={dummyEventHandler} />
 					</div>
 				</section>
 
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Comparison: With and Without Hidden Label" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
 					</div>
 				</section>
 
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Disabled with Hidden Label" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-robot" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-robot" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
 					</div>
 				</section>
 			</div>

package/src/components/button/icons.tsx

@@ -25,28 +25,28 @@ export const ButtonIcons: FC = () => {
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
-								left: 'codicon codicon-arrow-left',
+								left: 'kolicon-chevron-left',
 							}}
 							_label="Icon Left"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								right: 'codicon codicon-arrow-right',
+								right: 'kolicon-chevron-right',
 							}}
 							_label="Icon Right"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								top: 'codicon codicon-arrow-up',
+								top: 'kolicon-chevron-up',
 							}}
 							_label="Icon Top"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								bottom: 'codicon codicon-arrow-down',
+								bottom: 'kolicon-chevron-down',
 							}}
 							_label="Icon Bottom"
 							_on={dummyEventHandler}
@@ -59,16 +59,16 @@ export const ButtonIcons: FC = () => {
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
-								left: 'codicon codicon-arrow-left',
-								right: 'codicon codicon-arrow-right',
+								left: 'kolicon-chevron-left',
+								right: 'kolicon-chevron-right',
 							}}
 							_label="Left & Right"
 							_on={dummyEventHandler}
 						/>
 						<KolButton
 							_icons={{
-								top: 'codicon codicon-arrow-up',
-								bottom: 'codicon codicon-arrow-down',
+								top: 'kolicon-chevron-up',
+								bottom: 'kolicon-chevron-down',
 							}}
 							_label="Top & Bottom"
 							_on={dummyEventHandler}
@@ -85,13 +85,13 @@ export const ButtonIcons: FC = () => {
 									style: {
 										transform: 'rotate(45deg)',
 									},
-									icon: 'codicon codicon-arrow-up',
+									icon: 'kolicon-chevron-up',
 								},
-								bottom: 'codicon codicon-arrow-down',
+								bottom: 'kolicon-chevron-down',
 								left: {
-									icon: 'codicon codicon-arrow-left',
+									icon: 'kolicon-chevron-left',
 								},
-								right: 'codicon codicon-arrow-right',
+								right: 'kolicon-chevron-right',
 							}}
 							_label="All Directions"
 							_on={dummyEventHandler}
@@ -102,9 +102,9 @@ export const ButtonIcons: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Simple Icon String" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="Home Icon" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-heart" _label="Heart Icon" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-trash" _label="Trash Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-house" _label="Home Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-heart" _label="Heart Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-trash" _label="Trash Icon" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -117,7 +117,7 @@ export const ButtonIcons: FC = () => {
 									style: {
 										'font-size': '400%',
 									},
-									icon: 'codicon codicon-home',
+									icon: 'fa-solid fa-house',
 								},
 							}}
 							_label="Home"

package/src/components/button/row-reverse-tooltip.tsx

@@ -17,7 +17,7 @@ export const ButtonRowReverseTooltip: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Button in Row-Reverse Container" />
 					<div className="flex flex-row-reverse">
-						<KolButton _icons="codicon codicon-home" _hideLabel _label="This is a very, very long tooltip text that exceeds the width." _variant="primary" />
+						<KolButton _icons="fa-solid fa-house" _hideLabel _label="This is a very, very long tooltip text that exceeds the width." _variant="primary" />
 					</div>
 				</section>
 			</div>

package/src/components/button/short-key.tsx

@@ -33,7 +33,7 @@ export const ButtonShortKey: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Short Key with Hidden Label" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="codicon codicon-dashboard" _on={dummyEventHandler} />
+						<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="fa-solid fa-gauge" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -43,8 +43,8 @@ export const ButtonShortKey: FC = () => {
 						<KolButton
 							_label="with inline icons"
 							_icons={{
-								left: 'codicon codicon-dashboard',
-								right: 'codicon codicon-dashboard',
+								left: 'fa-solid fa-gauge',
+								right: 'fa-solid fa-gauge',
 							}}
 							_shortKey="n"
 							_on={dummyEventHandler}

package/src/components/button/spinner.tsx

@@ -28,7 +28,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button"
 							_hideLabel
 							_icons={{
-								left: 'codicon codicon-loading',
+								left: 'fa-solid fa-spinner',
 							}}
 							_label="Loading"
 							_variant="primary"
@@ -38,7 +38,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button spinner-slow"
 							_hideLabel
 							_icons={{
-								left: 'codicon codicon-sync',
+								left: 'fa-solid fa-rotate',
 							}}
 							_label="Syncing"
 							_variant="secondary"
@@ -48,7 +48,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button spinner-slower"
 							_hideLabel
 							_icons={{
-								left: 'codicon codicon-settings-gear',
+								left: 'fa-solid fa-gear',
 							}}
 							_label="Processing"
 							_variant="tertiary"
@@ -63,7 +63,7 @@ export const ButtonSpinner: FC = () => {
 						<KolButton
 							className="spinner-button"
 							_icons={{
-								left: 'codicon codicon-loading',
+								left: 'fa-solid fa-spinner',
 							}}
 							_label="Loading..."
 							_variant="primary"
@@ -72,7 +72,7 @@ export const ButtonSpinner: FC = () => {
 						<KolButton
 							className="spinner-button"
 							_icons={{
-								left: 'codicon codicon-sync',
+								left: 'fa-solid fa-rotate',
 							}}
 							_label="Syncing..."
 							_variant="secondary"

package/src/components/button/variants.tsx

@@ -21,12 +21,12 @@ export const ButtonVariants: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="All Button Variants" />
 					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
-						<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-smile" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
 					</div>
 				</section>
 			</div>

package/src/components/button-link/icons.tsx

@@ -12,35 +12,35 @@ export const ButtonLinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" />
+			<KolButtonLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon on the right"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon at the top"
 			/>
 			<KolButtonLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_label="I am a link with icon below"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 				_label="I am a link with all icons"
 			/>
-			<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="I am a link with icon only" />
+			<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );