@public-ui/sample-react 4.0.1-rc.2 → 4.0.1

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="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} />
+						<KolButton _hideLabel _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-kolibri" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-cogwheel" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-cogwheel" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-alert-warning" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-eye-closed" _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="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="kolicon-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="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} />
+						<KolButton _disabled _hideLabel _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="kolicon-kolibri" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="kolicon-cogwheel" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="kolicon-cogwheel" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="kolicon-alert-warning" _label="Delete" _variant="danger" _on={dummyEventHandler} />
 					</div>
 				</section>
 			</div>

package/src/components/button/icons.tsx

@@ -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="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} />
+						<KolButton _icons="kolicon-house" _label="Home Icon" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-kolibri" _label="Heart Icon" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-alert-warning" _label="Trash Icon" _on={dummyEventHandler} />
 					</div>
 				</section>
 

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="fa-solid fa-house" _hideLabel _label="This is a very, very long tooltip text that exceeds the width." _variant="primary" />
+						<KolButton _icons="kolicon-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="fa-solid fa-gauge" _on={dummyEventHandler} />
+						<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="kolicon-cogwheel" _on={dummyEventHandler} />
 					</div>
 				</section>
 
@@ -43,8 +43,8 @@ export const ButtonShortKey: FC = () => {
 						<KolButton
 							_label="with inline icons"
 							_icons={{
-								left: 'fa-solid fa-gauge',
-								right: 'fa-solid fa-gauge',
+								left: 'kolicon-cogwheel',
+								right: 'kolicon-cogwheel',
 							}}
 							_shortKey="n"
 							_on={dummyEventHandler}

package/src/components/button/spinner.tsx

@@ -28,7 +28,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button"
 							_hideLabel
 							_icons={{
-								left: 'fa-solid fa-spinner',
+								left: 'kolicon-cogwheel',
 							}}
 							_label="Loading"
 							_variant="primary"
@@ -38,7 +38,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button spinner-slow"
 							_hideLabel
 							_icons={{
-								left: 'fa-solid fa-rotate',
+								left: 'kolicon-cogwheel',
 							}}
 							_label="Syncing"
 							_variant="secondary"
@@ -48,7 +48,7 @@ export const ButtonSpinner: FC = () => {
 							className="spinner-button spinner-slower"
 							_hideLabel
 							_icons={{
-								left: 'fa-solid fa-gear',
+								left: 'kolicon-cogwheel',
 							}}
 							_label="Processing"
 							_variant="tertiary"
@@ -63,7 +63,7 @@ export const ButtonSpinner: FC = () => {
 						<KolButton
 							className="spinner-button"
 							_icons={{
-								left: 'fa-solid fa-spinner',
+								left: 'kolicon-cogwheel',
 							}}
 							_label="Loading..."
 							_variant="primary"
@@ -72,7 +72,7 @@ export const ButtonSpinner: FC = () => {
 						<KolButton
 							className="spinner-button"
 							_icons={{
-								left: 'fa-solid fa-rotate',
+								left: 'kolicon-cogwheel',
 							}}
 							_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="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} />
+						<KolButton _icons="kolicon-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-cogwheel" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-cogwheel" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="kolicon-eye-closed" _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="fa-solid fa-house" _label="I am a link with an icon on the left" />
+			<KolButtonLink _icons="kolicon-house" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_label="I am a link with an icon on the right"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_label="I am a link with an icon at the top"
 			/>
 			<KolButtonLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_label="I am a link with icon below"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 				_label="I am a link with all icons"
 			/>
-			<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="I am a link with icon only" />
+			<KolButtonLink _icons="kolicon-house" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );

package/src/components/handout/basic.tsx

@@ -279,7 +279,7 @@ export const HandoutBasic: FC = () => {
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolButton _label="ghost" _variant="ghost"></KolButton>
 									<KolButton _disabled _label="ghost" _variant="ghost"></KolButton>
-									<KolButton _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons="kolicon-house" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
 								</div>
 							</div>
 							<div className="grid gap-2 py-2">
@@ -306,7 +306,7 @@ export const HandoutBasic: FC = () => {
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons="kolicon-house" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 								</div>
 							</div>
 						</KolTabs>
@@ -317,8 +317,8 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="Links" _level={3} _open>
 							<div className="grid gap-2" slot="">
 								<KolLink _href="#/back-page" _label="Link text"></KolLink>
-								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _label="Link text with icon"></KolLink>
-								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolLink>
+								<KolLink _href="#/back-page" _icons="kolicon-house" _label="Link text with icon"></KolLink>
+								<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link text with icon only"></KolLink>
 								<KolLink _href="/" _label="Visited link"></KolLink>
 								<p>
 									I am a <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> in the running text.
@@ -328,8 +328,8 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="ButtonLinks" _level={3}>
 							<div className="grid gap-2" slot="">
 								<KolButtonLink _label="Link text"></KolButtonLink>
-								<KolButtonLink _icons="fa-solid fa-house" _label="Link text with icon"></KolButtonLink>
-								<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolButtonLink>
+								<KolButtonLink _icons="kolicon-house" _label="Link text with icon"></KolButtonLink>
+								<KolButtonLink _icons="kolicon-house" _hideLabel _label="Link text with icon only"></KolButtonLink>
 								<p>
 									I am a <KolButtonLink _label="Link"></KolButtonLink> in the running text.
 								</p>
@@ -371,48 +371,48 @@ export const HandoutBasic: FC = () => {
 								_links={[
 									{
 										_label: 'Homepage',
-										_icons: 'fa-solid fa-house',
+										_icons: 'kolicon-house',
 										_href: '#/back-page',
 									},
 									{
 										_label: '2 Navigation point',
-										_icons: 'fa-solid fa-house',
+										_icons: 'kolicon-house',
 										_href: '#/back-page',
 									},
 									{
 										_active: true,
 										_label: '3 Navigation point',
 										_href: '#/back-page',
-										_icons: 'fa-solid fa-house',
+										_icons: 'kolicon-house',
 										_children: [
 											{
 												_label: '3.1 Navigation point',
-												_icons: 'fa-solid fa-house',
+												_icons: 'kolicon-house',
 												_href: '#/back-page',
 											},
 											{
 												_label: '3.2 External navigation point',
-												_icons: 'fa-solid fa-house',
+												_icons: 'kolicon-house',
 												_href: '#/back-page',
 												_target: '_blank',
 											},
 											{
 												_label: '3.3 Navigation point',
 												_href: '#/back-page',
-												_icons: 'fa-solid fa-house',
+												_icons: 'kolicon-house',
 												_children: [
 													{
 														_active: true,
 														_label: '3.3.1 Navigation point (active)',
-														_icons: 'fa-solid fa-house',
+														_icons: 'kolicon-house',
 														_href: '#/back-page',
 													},
-													{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
+													{ _label: '3.3.2 Navigation point', _icons: 'kolicon-house', _href: '#/back-page' },
 												],
 											},
 										],
 									},
-									{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
+									{ _label: '3 Navigation point', _icons: 'kolicon-house', _href: '#/back-page' },
 								]}
 								_hasCompactButton
 							/>
@@ -441,7 +441,7 @@ export const HandoutBasic: FC = () => {
 							<KolInputNumber _label={`Number input`} />
 							<KolInputDate _type="date" _label={`Date`} />
 							<KolInputEmail
-								_icons="{'left': 'fa-solid fa-house'}"
+								_icons="{'left': 'kolicon-house'}"
 								_msg={{ _type: 'error', _description: 'Test of an error message' }}
 								_touched
 								_label={`E-mail address`}

package/src/components/icon/all-kolicons.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+
+import { KolIcon } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const IconAllKolicons: FC = () => {
+	const [icons, setIcons] = useState<object>({});
+
+	useEffect(() => {
+		fetch('/assets/kolicons/kolicons.json')
+			.then((response) => response.json())
+			.then((data) => {
+				setIcons(data);
+			});
+	});
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows all kolicons with their names.</p>
+			</SampleDescription>
+
+			<div className="grid grid-cols-2 gap-8 p-8">
+				{Object.entries(icons).map(([key]) => {
+					return (
+						<div className="flex gap-4" key={key}>
+							<KolIcon _label="" _icons={'kolicon-' + key} />
+							<span>kolicon-{key}</span>
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
+};

package/src/components/icon/basic.tsx

@@ -14,8 +14,8 @@ export const IconBasic: FC = () => (
 		<div className="grid gap-4">
 			<KolIcon className="block" _label="" _icons="kolicon-alert-info" />
 			<KolIcon className="block" _label="" _icons="kolicon-kolibri" />
-			<KolIcon className="block" _label="" _icons="fa-solid fa-house" />
-			<KolIcon className="block" _label="" _icons="fa-solid fa-heart" />
+			<KolIcon className="block" _label="" _icons="kolicon-house" />
+			<KolIcon className="block" _label="" _icons="kolicon-settings" />
 
 			<KolIcon
 				className="block w-[1em] h-[1em]"
@@ -23,7 +23,7 @@ export const IconBasic: FC = () => (
 					color: 'red',
 				}}
 				_label=""
-				_icons="fa-solid fa-house"
+				_icons="kolicon-house"
 			/>
 		</div>
 	</>

package/src/components/icon/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
+import { IconAllKolicons } from './all-kolicons';
 import { IconBasic } from './basic';
 import { IconFontAwesome } from './font-awesome';
 
 export const ICON_ROUTES: Routes = {
 	icon: {
 		basic: IconBasic,
+		'all-kolicons': IconAllKolicons,
 		'font-awesome': IconFontAwesome,
 	},
 };

package/src/components/input-color/partials/cases.tsx

@@ -12,7 +12,7 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 					{...props}
 					_msg={{ _type: 'error', _description: ERROR_MSG }}
 					_icons={{
-						left: 'fa-solid fa-palette',
+						left: 'kolicon-kolibri',
 					}}
 					_label="Color (Black background test)"
 					_value="#f08080"

package/src/components/input-file/partials/cases.tsx

@@ -13,7 +13,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 					_label="Upload file (Black background test)"
 					_icons={{
 						left: {
-							icon: 'fa-solid fa-floppy-disk',
+							icon: 'kolicon-check',
 						},
 					}}
 					_touched
@@ -27,7 +27,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
-						icon: 'fa-solid fa-floppy-disk',
+						icon: 'kolicon-check',
 					},
 				}}
 				_touched

package/src/components/input-text/basic.tsx

@@ -15,7 +15,7 @@ export const InputTextBasic: FC = () => (
 			<KolInputText _label="Name" _required _hint="Enter your surname" />
 			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
 			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
-			<KolInputText _label="Name" _icons="fa-solid fa-user" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="kolicon-house" _value="Anderson-Clark" />
 		</div>
 	</>
 );

package/src/components/input-text/smart-button.tsx

@@ -10,7 +10,7 @@ const smartButtonProps = {
 
 const icons = {
 	left: {
-		icon: 'fa-solid fa-magnifying-glass',
+		icon: 'kolicon-eye',
 	},
 	right: {
 		icon: 'kolicon-check',

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

@@ -14,7 +14,7 @@ export const LinkAccessKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S access key" _accessKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _accessKey="s" />
 			<KolLink _href="#/back-page" _label="Access key does not appear in label" _accessKey="s" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
 		</div>
 	</>
 );

package/src/components/link/basic.tsx

@@ -16,8 +16,8 @@ export const LinkBasic: FC = () => (
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
 			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="kolicon-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/icons.tsx

@@ -12,43 +12,43 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="kolicon-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="fa-solid fa-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink _icons="kolicon-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external linkwith an icon on the right"
@@ -56,7 +56,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with an icon at the top"
@@ -64,7 +64,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with icon below"
@@ -75,10 +75,10 @@ export const LinkIcons: FC = () => (
 				_label="I am a external link with all icons"
 				_target="_blank"
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 			/>
 		</div>

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

@@ -16,7 +16,7 @@ export const LinkShortKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
 			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
 		</div>
 	</>
 );

package/src/components/link/target.tsx

@@ -25,13 +25,13 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

package/src/components/popover-button/basic.tsx

@@ -16,20 +16,20 @@ export const PopoverButtonBasic: FC = () => {
 	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
 			type: 'button',
-			_label: 'Edit',
-			_icons: 'fa-solid fa-pen',
+			_label: 'Show',
+			_icons: 'kolicon-eye',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Duplicate',
-			_icons: 'fa-solid fa-copy',
+			_label: 'Add',
+			_icons: 'kolicon-plus',
 			_on: dummyEventHandler,
 		},
 	];

package/src/components/popover-button/inline.tsx

@@ -17,7 +17,7 @@ export const PopoverButtonInline: FC = () => {
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
-					<KolPopoverButton _inline={true} _label="Help" _icons="fa-solid fa-circle-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<KolPopoverButton _inline={true} _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
 							<p>

package/src/components/split-button/basic.tsx

@@ -16,19 +16,19 @@ export const SplitButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Save',
-			_icons: 'fa-solid fa-floppy-disk',
+			_icons: 'kolicon-check',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Move',
-			_icons: 'fa-solid fa-arrows-up-down-left-right',
+			_label: 'Move Up',
+			_icons: 'kolicon-chevron-up',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 	];