@public-ui/sample-react 4.0.0-alpha.10 → 4.0.0-alpha.12

package/src/components/handout/basic.tsx

@@ -264,62 +264,56 @@ export const HandoutBasic: FC = () => {
 						<KolTabs _label="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 							<div className="grid gap-2 py-2">
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
-									<KolButton
-										_disabled
-										_icons={{ right: 'codicon codicon-arrow-right' }}
-										_label="secondary"
-										_variant="secondary"
-										_on={dummyEventHandler}
-									></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
 								</div>
 								<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="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
 								</div>
 							</div>
 							<div className="grid gap-2 py-2">
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal"></KolLinkButton>
 								</div>
 								<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="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 								</div>
 							</div>
 						</KolTabs>
@@ -330,8 +324,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="codicon codicon-home" _label="Link text with icon"></KolLink>
-								<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></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="/" _label="Visited link"></KolLink>
 								<p>
 									I am a <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> in the running text.
@@ -341,17 +335,17 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="ButtonLinks" _level={3}>
 							<div className="grid gap-2" slot="">
 								<KolButtonLink _label="Link text"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _label="Link text with icon"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></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>
 								<p>
 									I am a <KolButtonLink _label="Link"></KolButtonLink> in the running text.
 								</p>
 								<KolButtonLink
 									_icons={{
-										left: 'codicon codicon-arrow-left',
-										right: 'codicon codicon-arrow-right',
-										top: 'codicon codicon-arrow-up',
-										bottom: 'codicon codicon-arrow-down',
+										left: 'kolicon-chevron-left',
+										right: 'kolicon-chevron-right',
+										top: 'kolicon-chevron-up',
+										bottom: 'kolicon-chevron-down',
 									}}
 									_label="Icons"
 								></KolButtonLink>
@@ -384,48 +378,48 @@ export const HandoutBasic: FC = () => {
 								_links={[
 									{
 										_label: 'Homepage',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_label: '2 Navigation point',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_active: true,
 										_label: '3 Navigation point',
 										_href: '#/back-page',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_children: [
 											{
 												_label: '3.1 Navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 											},
 											{
 												_label: '3.2 External navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 												_target: '_blank',
 											},
 											{
 												_label: '3.3 Navigation point',
 												_href: '#/back-page',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_children: [
 													{
 														_active: true,
 														_label: '3.3.1 Navigation point (active)',
-														_icons: 'codicon codicon-home',
+														_icons: 'fa-solid fa-house',
 														_href: '#/back-page',
 													},
-													{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+													{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 												],
 											},
 										],
 									},
-									{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+									{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 								]}
 								_hasCompactButton
 							/>
@@ -454,7 +448,7 @@ export const HandoutBasic: FC = () => {
 							<KolInputNumber _label={`Number input`} />
 							<KolInputDate _type="date" _label={`Date`} />
 							<KolInputEmail
-								_icons="{'left': 'codicon codicon-home'}"
+								_icons="{'left': 'fa-solid fa-house'}"
 								_msg={{ _type: 'error', _description: 'Test of an error message' }}
 								_touched
 								_label={`E-mail address`}

package/src/components/icon/basic.tsx

@@ -12,10 +12,10 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+			<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 w-[1em] h-[1em]"
@@ -23,7 +23,7 @@ export const IconBasic: FC = () => (
 					color: 'red',
 				}}
 				_label=""
-				_icons="codicon codicon-home"
+				_icons="fa-solid fa-house"
 			/>
 		</div>
 	</>

package/src/components/icon/font-awesome.tsx

@@ -16,8 +16,8 @@ export const IconFontAwesome: FC = () => (
 			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
-			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
-			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-thumbs-up"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
 
 			<KolInputText

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

@@ -11,13 +11,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Not selected" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Indeterminate" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Selected" _tooltipAlign="right" _value={true} />
-			<KolInputCheckbox
-				{...props}
-				_checked
-				_icons={{ unchecked: 'codicon codicon-close' }}
-				_label={'With a very long label and upheavals '.repeat(5)}
-				_value={true}
-			/>
+			<KolInputCheckbox {...props} _checked _icons={{ unchecked: 'ckolicon-cross' }} _label={'With a very long label and upheavals '.repeat(5)} _value={true} />
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />

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: 'codicon codicon-symbol-color',
+						left: 'fa-solid fa-palette',
 					}}
 					_label="Color (Black background test)"
 					_value="#f08080"

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

@@ -22,10 +22,10 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_touched
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 			/>

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: 'codicon codicon-save',
+							icon: 'fa-solid fa-floppy-disk',
 						},
 					}}
 					_touched
@@ -27,7 +27,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-save',
+						icon: 'fa-solid fa-floppy-disk',
 					},
 				}}
 				_touched

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

@@ -20,10 +20,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 				_label="Number input"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-snake',
+						icon: 'kolicon-kolibri',
 					},
 					right: {
-						icon: 'codicon codicon-squirrel',
+						icon: 'kolicon-kolibri',
 					},
 				}}
 			/>

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

@@ -21,10 +21,10 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				_label="Passwort"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 				_touched

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

@@ -16,10 +16,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 					_label="Slider (Black background test)"
 					_icons={{
 						left: {
-							icon: 'codicon codicon-arrow-left',
+							icon: 'kolicon-chevron-left',
 						},
 						right: {
-							icon: 'codicon codicon-arrow-right',
+							icon: 'kolicon-chevron-right',
 						},
 					}}
 					_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="codicon codicon-account" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="fa-solid fa-user" _value="Anderson-Clark" />
 		</div>
 	</>
 );

package/src/components/input-text/expert-slot.tsx

@@ -17,7 +17,7 @@ export const InputTextExpertSlot = () => {
 				<KolInputText _label="" _type="text" _value="Complex example">
 					<div slot="expert" className="flex items-center gap-2">
 						<KolBadge _label="Premium" _color="#1a73e8" />
-						<KolIcon _icons="codicon codicon-verified-filled" _label="" />
+						<KolIcon _icons="kolicon-check" _label="" />
 						<span>Verified account with premium features</span>
 					</div>
 				</KolInputText>

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

@@ -4,16 +4,16 @@ import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
-	_icons: 'codicon codicon-info',
+	_icons: 'kolicon-alert-info',
 	_hideLabel: true,
 };
 
 const icons = {
 	left: {
-		icon: 'codicon codicon-search',
+		icon: 'fa-solid fa-magnifying-glass',
 	},
 	right: {
-		icon: 'codicon codicon-check',
+		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="codicon codicon-home" _href="#/back-page" _label="access key without label" _accessKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-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="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon 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)" />
 			<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="codicon codicon-home" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_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"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="codicon codicon-home" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<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={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-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: 'codicon codicon-home',
+					top: 'fa-solid fa-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: 'codicon codicon-home',
+					bottom: 'fa-solid fa-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: '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',
 				}}
 			/>
 		</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="codicon codicon-home" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-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="codicon codicon-home" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

package/src/components/nav/links.ts

@@ -3,7 +3,7 @@ import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -18,11 +18,11 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'codicon codicon-home',
+				_icons: 'fa-solid fa-house',
 				_href: '#/back-page',
 			},
 			{
@@ -83,7 +83,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 		_children: [
 			{
 				_label: '6.1 Nested link',
@@ -96,7 +96,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -111,7 +111,7 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 	},
 	{
 		_label: '4 Navigation point with children and onClick',
@@ -125,14 +125,14 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 	},
 ];
 
 export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -147,11 +147,11 @@ export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'codicon codicon-home',
+				_icons: 'fa-solid fa-house',
 				_href: '#/back-page',
 			},
 			{

package/src/components/pagination/basic.tsx

@@ -20,7 +20,7 @@ export const PaginationBasic: FC = () => (
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test pagination 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test pagination 4" _on={{}} />
 			<KolPagination
-				_max={4}
+				_max={400}
 				_page={6}
 				_siblingCount={0}
 				_boundaryCount={2}