fix: audit the icon library against brand guidelines (#10722)

* feat: audit the icon library against brand guidelines

Every icon component checked against its brand's own published guidelines for
correct artwork, current colours, and readability on both app surfaces.

- 127 marks now carry a per-theme pair (text-[#light] dark:text-[#dark]), applied
  only where the brand publishes a reversed or dark variant. twMerge where the
  component exposes a class prop, so callers can still pass sizing.
- 296 of 304 brand icons record their source in a comment above the <svg>,
  including the rule where the brand imposes one (Google forbids recolouring,
  Cal.com is deliberately greyscale, Oracle reserves the MySQL dolphin).
- BRAND_COLORS.md is generated from the components, so the table cannot drift
  from the code.
- Marks that were unreadable on a surface: 13 -> 1 on dark, 9 -> 4 on light.
  The remainder are blocked by trademark terms, not unfixed.
- Wrong artwork replaced where a first-party or CC0 source existed: PayPal is
  the real three-colour monogram, Stripe is the bare S rather than an app tile,
  gcloud resolves to Google's mark instead of a generic hexagon.
- Concept icons (CACertificate, DbIcon, Webdav, Asset*, Bcrypt) inherit
  currentColor instead of hardcoding a colour.

Fixes a cross-component CSS bug: ten icons embedded <style> inside their <svg>.
Svelte only scopes a component's top-level style block, so those were injected as
document-global rules under names like .st0 and .cls-2, which four icons each
defined differently. WindmillIcon renders from the root logged-in layout, putting
.st0 { fill:#ffffff } on every page. Class names are now namespaced per icon.

Adds /kitchen_sink/icons, a gallery rendering every icon on both surfaces at once.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* feat: render brand icons in the surrounding text colour in control strips

A trigger picker mixing lucide glyphs (Webhook, Route, Database) with brand marks
(Kafka, GCP, AWS) read as two sets of controls once the marks became coloured.

Adds an .icon-mono utility that redirects descendant fills to currentColor, applied
by the container rather than passed to the icon. That is what makes it work on every
icon: GoogleCloudIcon has four hardcoded fills, no currentColor and no class prop, so
nothing passed to it could change its colour, and gradient-based marks cannot express
a monochrome variant at all without being redrawn.

- ToggleButton takes a monochromeIcon prop, opt-in since it is used app-wide.
- TriggersBadge, SidebarContent and QuickMenuItem (which backs GlobalSearchModal)
  apply it unconditionally: these are uniform lists where one coloured entry among
  grey ones reads as an error.
- DropdownV2 gains menuClass, because it portals its menu and a wrapper around the
  component cannot style it. CaptureButton passes icon-mono through it.

!important is required because a handful of icons paint through style="fill:…", which
no selector outranks. Stroke is redirected only where one is declared, so shapes
carrying stroke="none" do not sprout outlines. Wrappers use display:contents, so no
layout box is added.

RowIcon is deliberately untouched — table rows keep showing brand colour.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* docs: close out the icon provenance gaps

Sources the 8 icons that had none and settles the 54 records whose author rated
itself below "high" and which no verifier ever reached — the earlier run's
verification stage was killed by a session limit.

46 confirmed as already correct, 11 citations corrected, 3 colours corrected.
Two changes were refuted and reverted by the adversarial pass:

- Mysql: the comment had the colour-to-shape mapping inverted. Rasterising the
  first-party asset shows #00758F paints the dolphin and "My" while #F29111 paints
  "SQL", not the reverse. The mark renders monochrome here, so nothing on screen
  was ever wrong — only the note. Also rescoped the trademark sentence to what the
  page literally says.
- AdobeAcrobatSignIcon: a "corrected" citation was rejected on evidence. The agent
  claimed the original URL 404s; three fetches returned HTTP 200 with a genuine
  Adobe SVG whose stylesheet is .a{fill:#584ccc}. Reverted to the original comment,
  which also resolves the one unverified colour change on this branch — #584CCC is
  current and first-party confirmed.

AmqpIcon is deliberately left with no brand colour: AMQP is an OASIS protocol, not
a vendor, and amqp.org publishes no palette.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* feat: add icons for 11 resource types that had none

19 hub resource types fell back to a generic Boxes glyph. One agent per brand went
looking for a square vector logomark from a first-party source, with an adversarial
check on everything it produced; 11 landed and 8 correctly came back empty.

Added: beamer, campayn, codat, comapeo_server, klaviyo, matteroom, mollie, motimate,
paychex, terra, vectara. Each records its source, and the components follow the
library's conventions — no <style> block (Svelte does not scope those, which is what
made .st0 leak document-wide), gradient ids prefixed with the component name.

The other 8 keep the fallback, which is the right outcome rather than a failure:

- actimo, adrapid, aero_workflow, matteroom-adjacent niche products publish their mark
  only as raster. Upscaled PNGs would look soft beside 300+ vector marks.
- gfw redirects to Global Nature Watch and publishes a wordmark, not a mark.
- leonardoai, localcontexts, weatherapi, webscrapingai serve nothing usable.

No hand-tracing: approximating a mark from a screenshot is invention, not sourcing,
and a wrong logo is worse than the tidy fallback glyph.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* feat: lettermark fallback for reserved marks, and fix the resources table rows

Icons
- Brands that reserve their logo for licensees no longer ship it. BrandLetterIcon draws
  the initial in the brand's own colour instead: recognisable, not their mark, and not
  invented artwork. Adobe Acrobat Sign and MySQL use it, plus the eight resource types
  whose brands publish no vector mark at all.
  Adobe: "does not allow the use of its product icons by third parties in their products
  or related materials of any kind, except through an Adobe partnership agreement".
  On dark the letter inverts to a filled rounded square, because a mid-tone brand colour
  chosen to read on white goes dim as a foreground on #2e3441. Where white-on-tile is
  also dim, the tile takes a near-black letter instead; light-mode letters are darkened
  along their own hue until they clear 3:1. Every pair was measured, not eyeballed.
- Google Docs was drawing a generic monochrome document glyph while carrying a comment
  claiming Google's colours. Replaced with Google's own 192px product icon.
- Azure was drawn monochrome, justified by a comment citing Microsoft's rule against
  distorting the mark — which drawing it monochrome is. Replaced with Microsoft's own
  logo_azure.svg. Their terms say to use the icons "as they would appear within Azure";
  permitted use is diagrams, training and documentation, which is recorded in the file.
- Adobe Acrobat Sign's artwork was a geometric "A" plus a squiggle, not Adobe's ribbon
  swirl. Moot now that it is a lettermark, but the mark was wrong.
- Gradient, mask and clip ids in the new artwork are namespaced per icon; ids are
  document-global and collide the same way the .st0 class names did.

Resources tables
- Description cells are a fixed two lines: min-h floors short ones, line-clamp ceilings
  long ones, so every row is the same height. Full text on hover via title.
- Widened to 30rem (84 chars/line) and vertically centred. The clamp needs
  display:-webkit-box, which stacks lines from the top, so the span sits in a
  flex items-center wrapper rather than carrying the height itself.
- w-full min-w-0 max-w-[30rem] instead of a fixed w-96, so a narrow viewport shrinks the
  column and truncates rather than forcing the page to scroll sideways.
- The actions column loses its border-l separator and right-aligns the "Shared globally"
  badge, matching the rows that show buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: icon-mono filled lucide outlines and missed currentColor brand marks

Two bugs in the monochrome utility, both from the fill rule being too blunt.

- Lucide icons are outlines: fill="none" with stroke="currentColor" and no fills on
  their children. Forcing fill on every descendant overrode that none and turned each
  glyph into a solid blob. The filled case is now scoped to svgs that do not declare
  fill="none", and svgs that do only get children redirected if they declare a real
  fill of their own — so a brand mark drawn as an outline still works.
- Brand marks that paint with currentColor carry their own text-[#hex] class, so
  redirecting fills left them branded: MQTT stayed #660066, NATS #375C93. The svg now
  inherits the container's colour, which is what actually makes them monochrome.

Also wires the sidebar's trigger section, which was never covered: those links render
through MenuLink, not the sub-item block that had the class.

Verified in the browser across all five shapes an icon can take — lucide outline,
hardcoded fill, currentColor plus brand class, outline root with filled children, and
inline style="fill:#..". Lucide keeps fill:none and a grey stroke; the rest follow the
container.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* refactor: dedicated monochrome trigger icons instead of a CSS override

Reverts the trigger surfaces to the icons that were there before the brand-colour
audit, as ./icons/triggers/ variants. A trigger picker lists brand marks beside lucide
glyphs (Webhook, Route, Database), so a coloured mark reads as a different kind of
thing rather than a peer.

Ten variants, restored from main where they were already monochrome: Kafka, NATS, MQTT,
AMQP, AWS, Azure, Nextcloud, Google, GitHub. Google Cloud is the exception — main's copy
is a greyscale rendition rather than currentColor, so it is rebuilt from the current
four-colour artwork with the fills dropped.

Separate files rather than the CSS override that was there, because coercion cannot work
in general: forcing fills to currentColor breaks lucide's outline icons, which are
fill="none" with a stroke, and marks that set their own text-[#hex] class ignore a fill
rule entirely. Both bugs were live. The .icon-mono utility, ToggleButton's monochromeIcon
prop and the DropdownV2 menuClass pass-through are gone with it.

index.ts documents which folder to use where: ./triggers/ for trigger surfaces, the
full-colour mark for the resource picker, AppConnect and docs, and keep the two in sync.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: trigger pages and global search still used the colour brand marks

The ToggleButtonGroup on each trigger page pairs a brand icon with a lucide Code
glyph, so GCP Pub/Sub rendered Google's four-colour mark next to a monochrome one.
Kafka, NATS, MQTT and the rest had the same wiring; they were just less obvious
because their marks are near-monochrome already.

Repoints all seven trigger pages and the global search nav entries at the
./icons/triggers/ variants. RowIcon is left on the full-colour marks: table rows
show brand colour by design.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: restore the greyscale GCP trigger icon, and show variants in the gallery

The trigger variant had been flattened to currentColor, which collapses Google's cloud
into one flat silhouette and loses the tonal steps that give it shape. The pre-audit
icon was greyscale, not monochrome — #B0B0B0 / #D0D0D0 / #E0E0E0 / #FFFFFF — so it is
restored verbatim from main.

Also globs icons/**/*.svelte in /kitchen_sink/icons so trigger variants render next to
the full-colour marks they shadow, labelled by folder. Comparing the two is the thing
this page was missing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: flow trigger dropdown rows use the desaturated marks too

The flow-graph badge menu still rendered the full-colour brand marks next to
lucide glyphs. Route both dropdowns through triggerIconMapMono: the badge
itself keeps the colour mark, only the rows it opens change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* feat: rank resource-type search results by best match

Searching the description is what makes `gdrive` findable as "google", but it
also means "google" matches a dozen types that only mention the product in
passing. Rank a match on the type's own name above any description match, and
break ties on where the match starts, so `googleai` leads and a description
opening with "Google OAuth token..." beats one mentioning Google halfway
through.

Applied to all three resource-type searches: the Resource Types tab (whose bare
term also only searched the name until now), the add-resource drawer, and the
schema-narrowing picker.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: trigger pages and global search show the full-colour marks

The desaturated variants belong to the two dense lists that sit beside lucide
glyphs -- the sidebar trigger list and the capture dropdown. Everywhere else a
brand mark stands on its own and should be the real one: the per-kind trigger
pages, the command palette, the capture table and the chat tool cards. Records
the rule in icons/index.ts so the next caller picks the right folder.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: address review round on the icon and resource-type work

- AppConnectInner went back to listResourceTypeNames for the list: /resources/type/list
  is not on the public app domain's route allow-list, so a published app's resource
  picker 403'd and, because the throw left connectsManual unset, stayed empty on every
  retry. Descriptions now load best-effort behind it.
- Dropped DropdownV2's menuClass: nothing passes it; the flow-graph badge menu styles
  melt's Menu, which has its own.
- icons/index.ts named two surfaces for the desaturated variants; there are four, and
  the flow-graph badge and the menu it opens differ. Dropped the stale GCloudIcon note.
- GoogleCloudIcon takes width/height again: generic call sites resolve it through
  APP_TO_ICON_COMPONENT and pass no size, so gcloud rendered at 16px after the remap.
- The path explainer is one ResourcePathHint component instead of the same copy twice.
- BRAND_COLORS.md recorded Ansible, Datadog, Deno, DeepL and Toggl as fixed; each
  publishes a second artwork swapped in by class, so their dark hex and ratio were
  wrong. Header no longer claims a generator that isn't in the repo.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: drop the duplicate gcloud icon and unblock the connect list

GCloudIcon.svelte was rewritten into the same four-colour mark as
GoogleCloudIcon.svelte and nothing pointed at it any more, so it was two files
drawing one logo waiting to drift apart.

The description fetch also sat on the critical path: the "Others" list showed
skeletons until a request for every type's full schema returned -- one that a
published app is guaranteed to get a 403 on. It now runs unawaited, and search
re-ranks when the descriptions land.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: AwsIcon and GoogleIcon take size again

The audit narrowed both to width/height with a 24px default, but every dynamic
call site passes size — RowIcon, the flow trigger badges, ToggleButton, global
search, the chat tool cards, the native-trigger page — so the SQS and Google
marks rendered at 24px wherever a smaller size was asked for. Both take size
again, keep width/height for the call sites that use those, and accept a class
so RowIcon's grey still applies.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: row-strip brand marks keep their colour

RowIcon greyed five of its seven brand marks with text-gray-400 while gcp and
azure rendered in colour. Now that AwsIcon accepts a class, the grey took its
wordmark but not its hardcoded #FF9900 smile, so the SQS row came out half
grey, half orange.

The rule this branch settled on is that only the four trigger menus desaturate;
a table is not one of them. Dropping the class from all five makes the strip
agree with the gcp and azure rows beside them, and with the lucide glyphs
staying grey since they carry no brand colour to keep.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Guilhem
2026-08-18 12:25:21 +02:00
committed by GitHub
co-authored by Claude Opus 5
parent 8492b4b4ba
commit 6749015fbf
391 changed files with 9379 additions and 2409 deletions
@@ -7,6 +7,8 @@
import AppConnectInner from './AppConnectInner.svelte'
import DarkModeObserver from './DarkModeObserver.svelte'
import IconedResourceType from './IconedResourceType.svelte'
import { addResourceTitle } from './resourceTypeDisplay'
interface Props {
expressOAuthSetup?: boolean
@@ -59,12 +61,17 @@
{disableChatOffset}
>
<DrawerContent
title="Add a resource"
title={addResourceTitle(step > 1 ? resourceType : undefined)}
id="add-resource-drawer"
on:close={drawer?.closeDrawer}
tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
>
{#snippet titleExtra()}
{#if step > 1 && resourceType}
<IconedResourceType name={resourceType} silent width="20px" height="20px" />
{/if}
{/snippet}
<AppConnectInner
bind:this={appConnectInner}
bind:step
@@ -4,6 +4,7 @@
import { userStore, workspaceStore } from '$lib/stores'
import LabelsInput from './LabelsInput.svelte'
import IconedResourceType from './IconedResourceType.svelte'
import { resourceTypeSearchText, sortResourceTypesByMatch } from './resourceTypeDisplay'
import {
OauthService,
ResourceService,
@@ -22,7 +23,6 @@
import WhitelistIp from './WhitelistIp.svelte'
import { sendUserToast } from '$lib/toast'
import OauthScopes from './OauthScopes.svelte'
import Markdown from 'svelte-exmarkdown'
import autosize from '$lib/autosize'
import { base } from '$lib/base'
import Required from './Required.svelte'
@@ -35,6 +35,7 @@
import { sameTopDomainOrigin } from '$lib/cookies'
import SyncResourceTypes from './SyncResourceTypes.svelte'
import Label from './Label.svelte'
import ResourcePathHint from './ResourcePathHint.svelte'
interface Props {
step?: number
@@ -98,6 +99,7 @@
let connectClient: string = $state('')
let connectsManual: { key: string; img?: string; instructions: string[] }[] | undefined =
$state(undefined)
let resourceTypeDescriptions: Record<string, string> = $state({})
let args: any = $state({})
let renderDescription = $state(true)
@@ -396,6 +398,20 @@
workspace: effectiveWorkspace
})
// Descriptions only feed search, so they are fetched off the critical path and
// allowed to fail: `resources/type/list` is not on the public app domain's route
// allow-list (`listnames` is), and it carries every type's full schema. Awaiting it
// would hold the list behind a request nothing on screen needs -- in a published
// app, behind one that is guaranteed to 403. resourceTypeDescriptions feeds a
// $derived, so search re-ranks when they land.
ResourceService.listResourceType({ workspace: effectiveWorkspace })
.then((types) => {
resourceTypeDescriptions = Object.fromEntries(
types.filter((t) => t.description).map((t) => [t.name, t.description!])
)
})
.catch(() => {})
// "Others" lists every resource type — including instance-configured OAuth
// providers — so any of them can also be connected with the user's own
// credentials or manually, not only via the shared instance setup (same as
@@ -870,6 +886,22 @@
let filteredConnects: { key: string }[] = $state([])
let filteredConnectsManual: { key: string; img?: string; instructions: string[] }[] = $state([])
// uFuzzy scores the name and the description as one string, so searching "google" ranks
// every type whose description mentions Google alongside the ones named after it. Re-sort
// on which field matched, keeping uFuzzy's order within a tier.
const rank = (items: { key: string }[] | undefined) =>
items &&
sortResourceTypesByMatch(
items,
filter,
(x) => x.key,
(x) => resourceTypeDescriptions[x.key]
)
let rankedConnects = $derived(rank(filteredConnects))
let rankedConnectsManual = $derived(
rank(filteredConnectsManual) as typeof filteredConnectsManual | undefined
)
let editScopes = $state(false)
</script>
@@ -882,13 +914,13 @@
}))
: undefined}
bind:filteredItems={filteredConnects}
f={(x) => x.key}
f={(x) => resourceTypeSearchText(x.key, resourceTypeDescriptions[x.key])}
/>
<SearchItems
{filter}
items={connectsManual}
bind:filteredItems={filteredConnectsManual}
f={(x) => x.key}
f={(x) => resourceTypeSearchText(x.key, resourceTypeDescriptions[x.key])}
/>
{#if step == 1}
<div class="pb-2 my-1">
@@ -904,8 +936,8 @@
<h2 class="mb-4 text-sm font-semibold text-emphasis">Instance-configured OAuth APIs</h2>
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center">
{#if filteredConnects}
{#each filteredConnects as { key }}
{#if rankedConnects}
{#each rankedConnects as { key }}
<Button
unifiedSize="md"
variant="default"
@@ -945,8 +977,8 @@
{/if}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
{#if filteredConnectsManual}
{#each filteredConnectsManual as { key }}
{#if rankedConnectsManual}
{#each rankedConnectsManual as { key }}
{#if nativeLanguagesCategory.includes(key)}
<Button
unifiedSize="md"
@@ -959,8 +991,8 @@
{/if}
{/each}
{/if}
{#if filteredConnectsManual}
{#each filteredConnectsManual as { key }}
{#if rankedConnectsManual}
{#each rankedConnectsManual as { key }}
{#if !nativeLanguagesCategory.includes(key)}
<!-- Exclude specific items -->
<Button
@@ -993,7 +1025,11 @@
</div>
{:else if step == 2 && manual}
<div class="flex flex-col gap-8">
{#if !emptyString(resourceTypeInfo?.description)}
<GfmMarkdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} prose="sm" noPadding />
{/if}
<Label label="Path">
<ResourcePathHint />
<Path
bind:error={pathError}
bind:path
@@ -1013,9 +1049,9 @@
{/if}
{#if apiTokenApps[resourceType]}
<h2 class="mt-4 mb-2">Instructions</h2>
<div class="pl-10">
<ol class="list-decimal">
<div class="flex flex-col gap-2">
<h2 class="text-sm font-semibold text-emphasis">Instructions</h2>
<ol class="list-decimal pl-5 text-xs text-primary flex flex-col gap-1">
{#each apiTokenApps[resourceType].instructions as step}
<li>
{@html step}
@@ -1032,15 +1068,6 @@
/>
</div>
{/if}
{:else if !emptyString(resourceTypeInfo?.description)}
<label class="flex flex-col gap-1">
<span class="text-sm font-semibold text-emphasis">
{resourceTypeInfo?.name} description
</span>
<div class="text-xs text-primary font-normal">
<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
</div>
</label>
{/if}
{#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'}
<WhitelistIp />
@@ -1068,7 +1095,7 @@
{:else if description == undefined || description == ''}
<div class="text-xs text-primary font-normal">No description provided</div>
{:else}
<GfmMarkdown md={description} />
<GfmMarkdown md={description} prose="sm" />
{/if}
</div>
@@ -1124,12 +1151,11 @@
</div>
{#if resourceTypeInfo?.description}
<div class="flex flex-col gap-1">
<h3 class="text-sm font-semibold text-emphasis">Description</h3>
<div class="text-xs text-primary font-normal">
<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
</div>
</div>
<GfmMarkdown
md={urlize(resourceTypeInfo?.description ?? '', 'md')}
prose="sm"
noPadding
/>
{/if}
<LabelsInput bind:labels class="-mt-5" />
@@ -1,13 +1,17 @@
<script lang="ts">
import { Markdown } from 'svelte-exmarkdown'
import { markdownPlugins as plugins } from './markdownPlugins'
import { markdownProse, type MarkdownProseSize } from './markdownProse'
import { isOfflineReplay } from './recording/offlineReplay.svelte'
interface Props {
md: string
noPadding?: boolean
/** Shared prose stack to render with. Omitted keeps the legacy `prose-xs`,
* which the flow-graph notes are laid out against. */
prose?: MarkdownProseSize
}
let { md, noPadding }: Props = $props()
let { md, noPadding, prose }: Props = $props()
// Rendering markdown turns `![](url)` into a real `<img>`, i.e. a request. On the
// public replay page the source is a recording from an arbitrary origin and the
@@ -17,7 +21,7 @@
let asPlainText = $derived(isOfflineReplay())
</script>
<div class="!prose-xs {noPadding ? '' : 'pgap'}">
<div class="{prose ? markdownProse[prose] : '!prose-xs'} {noPadding ? '' : 'pgap'}">
{#if asPlainText}
<p class="whitespace-pre-wrap">{md}</p>
{:else}
@@ -8,6 +8,8 @@
import type { AppViewerContext } from './apps/types'
import { sendUserToast } from '$lib/toast'
import Select from './select/Select.svelte'
import IconedResourceType from './IconedResourceType.svelte'
import { addResourceTitle } from './resourceTypeDisplay'
interface Props {
value: string | undefined
@@ -103,11 +105,16 @@
{:else}
<Drawer bind:this={drawer} size="800px">
<DrawerContent
title="Add a resource"
title={addResourceTitle(resourceType)}
on:close={drawer.closeDrawer}
tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
>
{#snippet titleExtra()}
{#if resourceType}
<IconedResourceType name={resourceType} silent width="20px" height="20px" />
{/if}
{/snippet}
{#await import('./AppConnectLightweightResourcePicker.svelte')}
<Loader2 class="animate-spin" />
{:then Module}
@@ -16,6 +16,8 @@
} from './sessions/pageDrawerSession'
import { RESOURCES_PATH } from './sessions/previewPaths'
import ResourceVersionHistory from './ResourceVersionHistory.svelte'
import IconedResourceType from './IconedResourceType.svelte'
import { addResourceTitle } from './resourceTypeDisplay'
let {
workspace = undefined,
@@ -90,10 +92,15 @@
on:close={() => clearPageDrawerAnchor(RESOURCES_PATH)}
>
<DrawerContent
title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
title={mode == 'edit' ? 'Edit ' + path : addResourceTitle(resource_type)}
bannerReserved={mode == 'edit'}
on:close={drawer?.closeDrawer}
>
{#snippet titleExtra()}
{#if mode == 'new' && resource_type}
<IconedResourceType name={resource_type} silent width="20px" height="20px" />
{/if}
{/snippet}
{#await import('./ResourceEditor.svelte')}
<Loader2 class="animate-spin" />
{:then Module}
@@ -15,7 +15,6 @@
import Toggle from './Toggle.svelte'
import TestConnection from './TestConnection.svelte'
import { Pen } from 'lucide-svelte'
import Markdown from 'svelte-exmarkdown'
import autosize from '$lib/autosize'
import GfmMarkdown from './GfmMarkdown.svelte'
import TestTriggerConnection from './triggers/TestTriggerConnection.svelte'
@@ -24,6 +23,7 @@
import ResourceGen from './copilot/ResourceGen.svelte'
import SyncResourceTypes from './SyncResourceTypes.svelte'
import Label from './Label.svelte'
import ResourcePathHint from './ResourcePathHint.svelte'
interface Props {
path: string
@@ -142,6 +142,10 @@
})
</script>
{#if !emptyString(resourceTypeInfo?.description)}
<GfmMarkdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} prose="sm" noPadding />
{/if}
{#if !hidePath}
<div>
{#if !can_write}
@@ -152,6 +156,7 @@
</div>
{/if}
<Label label="Path">
<ResourcePathHint />
<Path
disabled={initialPath != '' && !isOwner(initialPath, $userStore, ws)}
bind:path
@@ -174,15 +179,6 @@
</Label>
{/if}
{#if !emptyString(resourceTypeInfo?.description)}
<div class="flex flex-col gap-1">
<h4 class="text-xs text-emphasis font-semibold">{resourceTypeInfo?.name} description</h4>
<div class="text-xs text-primary font-normal">
<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
</div>
</div>
{/if}
<div class="flex flex-col gap-1">
<h4 class="inline-flex items-center gap-2 text-xs text-emphasis font-semibold"
>Resource description <Required required={false} />
@@ -210,9 +206,7 @@
{:else if description == undefined || description == ''}
<div class="text-xs text-secondary font-normal">No description provided</div>
{:else}
<div class="text-xs text-primary font-normal">
<GfmMarkdown md={description} noPadding />
</div>
<GfmMarkdown md={description} prose="sm" noPadding />
{/if}
</div>
@@ -0,0 +1,7 @@
<!-- Shown above the Path input wherever a resource is created: the resource form and the
connect drawer's last step. One component so the two screens cannot drift apart. -->
<div class="text-xs text-secondary font-normal mb-1">
The path sets who can access this resource: a <code>u/</code> path is private to that user, an
<code>f/</code> path follows the folder's permissions — read access lets people use the resource, write
access lets them edit it.
</div>
@@ -9,6 +9,7 @@
import Tooltip from './Tooltip.svelte'
import Badge from './common/badge/Badge.svelte'
import { untrack } from 'svelte'
import { resourceTypeSearchText, sortResourceTypesByMatch } from './resourceTypeDisplay'
interface Props {
value: string | undefined
notPickable?: boolean
@@ -17,10 +18,15 @@
let { value = $bindable(), notPickable = false, nonePickable = false }: Props = $props()
let resources: string[] = $state([])
let resources: { name: string; description?: string; searchText: string }[] = $state([])
async function loadResources() {
resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore! })
const types = await ResourceService.listResourceType({ workspace: $workspaceStore! })
resources = types.map((t) => ({
name: t.name,
description: t.description,
searchText: resourceTypeSearchText(t.name, t.description)
}))
}
const dispatch = createEventDispatcher()
@@ -40,7 +46,12 @@
let search: string = $state('')
let filteredResources = $derived(
resources.filter((r) => r.toLowerCase().includes(search.toLowerCase()))
sortResourceTypesByMatch(
resources.filter((r) => r.searchText.toLowerCase().includes(search.trim().toLowerCase())),
search,
(r) => r.name,
(r) => r.description
)
)
</script>
@@ -78,18 +89,18 @@
</Button>
{/if}
{#each filteredResources as r}
{@const isPicked = value === r}
{@const isPicked = value === r.name}
<Button
size="sm"
variant="default"
selected={isPicked}
disabled={notPickable}
on:click={() => {
onClick(r)
onClick(r.name)
close()
}}
>
<IconedResourceType name={r} after={true} width="20px" height="20px" />
<IconedResourceType name={r.name} after={true} width="20px" height="20px" />
</Button>
{/each}
@@ -116,15 +116,15 @@
{:else if effectiveKind === 'postgres'}
<Database {size} class="text-gray-400" />
{:else if effectiveKind === 'kafka'}
<KafkaIcon {size} class="text-gray-400" />
<KafkaIcon {size} />
{:else if effectiveKind === 'nats'}
<NatsIcon {size} class="text-gray-400" />
<NatsIcon {size} />
{:else if effectiveKind === 'mqtt'}
<MqttIcon {size} class="text-gray-400" />
<MqttIcon {size} />
{:else if effectiveKind === 'amqp'}
<AmqpIcon {size} class="text-gray-400" />
<AmqpIcon {size} />
{:else if effectiveKind === 'sqs'}
<AwsIcon {size} class="text-gray-400" />
<AwsIcon {size} />
{:else if effectiveKind === 'gcp'}
<GoogleCloudIcon {size} />
{:else if effectiveKind === 'azure'}
@@ -5,16 +5,18 @@
import { getContext } from 'svelte'
import { type TriggerContext } from '$lib/components/triggers'
import { enterpriseLicense } from '$lib/stores'
import {
MqttIcon,
AmqpIcon,
NatsIcon,
KafkaIcon,
AwsIcon,
GoogleCloudIcon
} from '$lib/components/icons'
import MqttIcon from '$lib/components/icons/MqttIcon.svelte'
import AmqpIcon from '$lib/components/icons/AmqpIcon.svelte'
import NatsIcon from '$lib/components/icons/NatsIcon.svelte'
import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
import AwsIcon from '$lib/components/icons/AwsIcon.svelte'
import GoogleCloudIcon from '$lib/components/icons/GoogleCloudIcon.svelte'
import AzureIcon from '$lib/components/icons/AzureIcon.svelte'
import { type Trigger, type TriggerType } from '$lib/components/triggers/utils'
import {
triggerIconMapMono,
type Trigger,
type TriggerType
} from '$lib/components/triggers/utils'
import { Menu, Menubar, MeltButton, MenuItem, Tooltip } from '$lib/components/meltComponents'
import { twMerge } from 'tailwind-merge'
import SchedulePollIcon from '$lib/components/icons/SchedulePollIcon.svelte'
@@ -320,10 +322,13 @@
{/snippet}
{#snippet simpleTriggerItem({ item, type })}
{@const { icon: SvelteComponent, countKey } = triggerTypeConfig()[type] || {
{@const { icon: ColourIcon, countKey } = triggerTypeConfig()[type] || {
icon: Database,
countKey: undefined
}}
<!-- The badge shows the full-colour mark; the menu it opens is a dense list beside lucide
glyphs, so its rows use the desaturated variants. See icons/index.ts. -->
{@const SvelteComponent = triggerIconMapMono[type] ?? ColourIcon}
<MenuItem {item} class={itemClass}>
<div class="flex flex-row items-center gap-2">
<SvelteComponent size={14} />
@@ -0,0 +1,59 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FF5416 → #FF0000 gradient on both themes per brand.ably.com/logo. "Don't use other colours or gradients for the symbol." -->
<svg
{width}
{height}
viewBox="0 0 77.5931 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M38.5717 0L6.29575 59.0738L0 54.6586L29.8639 0H38.5717ZM39.0214 0L71.2973 59.0738L77.5931 54.6586L47.7292 0H39.0214Z"
fill="url(#ably-motif-upper)"
/>
<path
d="M70.8476 59.4213L38.7965 34.3201L6.74542 59.4213L13.2865 64L38.7965 44.0294L64.3066 64L70.8476 59.4213Z"
fill="url(#ably-motif-lower)"
/>
<defs>
<linearGradient
id="ably-motif-upper"
x1="10.9472"
y1="74.8439"
x2="64.9206"
y2="14.9005"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF5416" />
<stop offset="0.2535" stop-color="#FF5115" />
<stop offset="0.461" stop-color="#FF4712" />
<stop offset="0.6523" stop-color="#FF350E" />
<stop offset="0.8327" stop-color="#FF1E08" />
<stop offset="1" stop-color="#FF0000" />
</linearGradient>
<linearGradient
id="ably-motif-lower"
x1="21.4168"
y1="78.7187"
x2="53.3166"
y2="43.2904"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF5416" />
<stop offset="0.2535" stop-color="#FF5115" />
<stop offset="0.461" stop-color="#FF4712" />
<stop offset="0.6523" stop-color="#FF350E" />
<stop offset="0.8327" stop-color="#FF1E08" />
<stop offset="1" stop-color="#FF0000" />
</linearGradient>
</defs>
</svg>
@@ -0,0 +1,30 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #20E492 per abstractapi.com's own logo SVG (6538df34291c9fa4ed28d6f7_Logo.svg). -->
<svg {width} {height} viewBox="0.77 0 90.15 90.15" xmlns="http://www.w3.org/2000/svg">
<defs
><clipPath id="abstractapi-clip0_4255_674">
<rect
width="90.1487"
height="90.1487"
fill="white"
transform="translate(0.769531 0.000732422)"
/>
</clipPath></defs
>
<g clip-path="url(#abstractapi-clip0_4255_674)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M84.2021 0.000732422H7.43104C3.77267 0.000732422 0.769531 3.00387 0.769531 6.66224V83.4333C0.769531 87.1463 3.77267 90.1495 7.43104 90.1495H20.6994C23.8664 89.9856 25.9413 88.7844 26.9787 86.4365C29.545 78.4099 37.0802 72.6221 45.9804 72.6221C54.8806 72.6221 62.4158 78.4099 65.0367 86.4365C66.0741 88.7844 68.149 89.9856 71.316 90.1495H84.2021C87.9151 90.1495 90.9183 87.1463 90.9183 83.4333V6.66224C90.9183 3.00387 87.9151 0.000732422 84.2021 0.000732422ZM64.1084 53.8388H27.5248C26.5419 53.8388 25.8867 52.7467 26.3781 51.8185L44.6699 20.1491C45.216 19.2754 46.4718 19.2754 47.0178 20.1491L65.3097 51.8185C65.8011 52.7467 65.1459 53.8388 64.1084 53.8388Z"
fill="#20E492"
/>
</g>
</svg>
@@ -0,0 +1,23 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #4C49CB, with #F6511E and #CAD1E1, per Accelo_Logo-Primary.svg on accelo.com. The mark keeps these
three fills in both themes; only the wordmark (not drawn here) swaps #10202D for white. -->
<svg {width} {height} viewBox="-1 -1 158 152" xmlns="http://www.w3.org/2000/svg">
<path
d="M95.1552 97.2397C92.0269 90.7038 84.2061 87.9534 77.6839 91.0587L7.56272 124.655C0.922451 127.849 -1.8517 135.804 1.30611 142.429C3.60807 147.22 8.35955 150 13.3176 150C15.2359 150 17.2132 149.586 19.0725 148.699L89.1642 115.162C95.6864 112.027 98.4606 104.19 95.3323 97.6537C95.2733 97.5354 95.2142 97.4171 95.1552 97.2988V97.2397Z"
fill="#CAD1E1"
/><path
d="M13.2881 150C11.1632 150 9.03834 149.497 7.0315 148.433C0.538796 144.972 -1.88121 136.899 1.57173 130.392L67.2956 7.06827C70.7485 0.561959 78.8054 -1.86312 85.2981 1.59705C91.7908 5.05723 94.2108 13.131 90.7579 19.6373L25.034 142.932C22.6435 147.427 18.0396 150 13.2881 150Z"
fill="#4C49CB"
/><path
d="M143.378 150C138.597 150 133.964 147.397 131.573 142.843L67.2366 19.5189C63.8427 13.0126 66.3512 4.93885 72.844 1.53782C79.3367 -1.8632 87.3935 0.650598 90.7874 7.15691L155.154 130.481C158.548 136.987 156.039 145.061 149.546 148.462C147.569 149.497 145.474 149.97 143.378 149.97V150Z"
fill="#F6511E"
/>
</svg>
@@ -0,0 +1,23 @@
<script lang="ts">
import BrandLetterIcon from './BrandLetterIcon.svelte'
interface Props {
height?: string
width?: string
size?: number
}
let { height = '24px', width = '24px', size = undefined }: Props = $props()
</script>
<!-- Actimo publishes no vector mark and no brand palette; its favicon.ico is zero bytes and the
pinwheel exists only as raster (actimo.com, now a Kahoot! company). Letter inherits the
surrounding text colour rather than inventing a brand colour. -->
<BrandLetterIcon
letter="A"
bgClass="fill-transparent"
textClass="text-secondary"
{height}
{width}
{size}
/>
@@ -7,9 +7,17 @@
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 256 391" xmlns="http://www.w3.org/2000/svg">
<!-- #004CFF / #FFFFFF per activecampaign.com/brand logo pack (ActiveCampaign-Glyph-Blue.svg /
ActiveCampaign-Glyph-White.svg). -->
<svg
class="text-[#004CFF] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 256 391"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#004CFF"
d="m1.273 0l3.049 2.142c9.488 6.603 232.185 161.826 238.397 166.475c8.795 6.174 13.281 13.81 13.281 22.668v4.397c-.1 6.842-2.558 16.469-13.28 24.52l-.039.026c-5.166 3.692-57.747 40.12-113.415 78.701c-4.9 3.397-9.858 6.832-14.827 10.275l-3.314 2.297C61.96 345.572 12.62 379.777 5.947 384.498v6.136l-3.641-6.124c-.177-.315-.34-.58-.151-1.008H2.04v-32.03c0-10.924 1.21-16.178 13.37-24.28c5.179-3.33 49.529-33.955 94.578-65.128l5.3-3.668c41.513-28.73 82.338-57.033 92.364-63.974C186.484 179.718 27.796 69.554 16.923 61.59l-1.286-.932C7.598 54.836 1.273 50.25 1.273 38.128zM21.86 111.361c10.736 6.905 114.562 78.954 115.608 79.697l2.356 1.626l-2.394 1.6s-7.018 4.675-14.805 10.118c-6.666 4.889-12.903 7.333-19.102 7.333c-5.506 0-10.962-1.915-16.708-5.733c-6.12-4.086-23.363-15.98-40.816-28.064l-2.38-1.648A27213 27213 0 0 1 .832 146.592l-.832-.58v-24.47c0-5.62 2.42-10.067 6.666-12.222c4.548-2.318 10.231-1.562 15.195 2.041"
/>
</svg>
@@ -1,12 +1,13 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #F1007E (grey half #6D6D6D) per activitypub.rocks/static/images/ActivityPub-logo.svg. -->
<svg
x="0px"
y="0px"
@@ -0,0 +1,407 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #149ED7 per Acumbamail's own isotype SVG, /static/favico/Acumbamail/favicon-32.svg on acumbamail.com. -->
<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="acumbamail-clippath">
<path
fill="none"
d="M19.88,24.42c-.07.36-.09.39-.09.39l8.64,2.75h.1c.06-.07.25-.29.4-.5.17-.23.25-.37.25-.37l-9.21-2.81s-.03.25-.09.54h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_14"
data-name="Degradado sin nombre 14"
x1="3092.71"
y1="-1703.57"
x2="3093.22"
y2="-1703.57"
gradientTransform="translate(-42784.62 23603.13) scale(13.84)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e62f71" />
<stop offset=".11" stop-color="#e62f71" />
<stop offset=".71" stop-color="#ea5d52" />
<stop offset=".86" stop-color="#ec6a4a" />
<stop offset="1" stop-color="#ec6a4a" />
</linearGradient>
<clipPath id="acumbamail-clippath-1">
<polygon fill="none" points=".04 9.32 10.75 10.49 10.75 9.43 .04 7.99 .04 9.32" />
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_7"
data-name="Degradado sin nombre 7"
x1="3183.18"
y1="-1671.62"
x2="3183.69"
y2="-1671.62"
gradientTransform="translate(-67072.09 35230.2) scale(21.07)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#149ed7" />
<stop offset=".44" stop-color="#45afdf" />
<stop offset=".8" stop-color="#68bbe5" />
<stop offset="1" stop-color="#76c0e8" />
</linearGradient>
<clipPath id="acumbamail-clippath-2">
<polygon fill="none" points=".04 16.95 .04 17.86 10.75 16.95 10.75 16.13 .04 16.95" />
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_8"
data-name="Degradado sin nombre 8"
x1="3183.18"
y1="-1672"
x2="3183.69"
y2="-1672"
gradientTransform="translate(-67072.09 35246.13) scale(21.07)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#149ed7" />
<stop offset=".54" stop-color="#078bc8" />
<stop offset="1" stop-color="#0080c0" />
</linearGradient>
<clipPath id="acumbamail-clippath-3">
<path
fill="none"
d="M1.25,26.02s.14.26.45.7c.14.21.24.33.28.38h.08l9.17-3.75s-.09-.24-.17-.57c-.09-.36-.16-.78-.16-.78L1.25,26.02h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_10"
data-name="Degradado sin nombre 10"
x1="3245.89"
y1="-1870.85"
x2="3246.4"
y2="-1870.85"
gradientTransform="translate(-44239.32 25524.21) scale(13.63)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#0463a9" />
<stop offset="1" stop-color="#0080c0" />
</linearGradient>
<clipPath id="acumbamail-clippath-4">
<path
fill="none"
d="M19.53,18.03s.09.43.14.71c.05.28,9.82-1.38,9.82-1.38,0,0-.11-.55-.17-.8,0-.02-.05-.02-.14-.02-1.18,0-9.66,1.49-9.66,1.49h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_5"
data-name="Degradado sin nombre 5"
x1="3082.78"
y1="-1704.52"
x2="3083.29"
y2="-1704.52"
gradientTransform="translate(-41380.04 22909.51) scale(13.43)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f9b434" />
<stop offset=".05" stop-color="#f9b434" />
<stop offset=".3" stop-color="#f4983c" />
<stop offset=".74" stop-color="#ec6a4a" />
<stop offset="1" stop-color="#ec6a4a" />
</linearGradient>
<clipPath id="acumbamail-clippath-5">
<path
fill="none"
d="M18.72,8.05c-.03.07-.16.31-.29.68-.15.42-.23.8-.23.8l10.4,2.74s0-.27.09-.59c.03-.11.07-.22.07-.22l-9.97-3.41h-.06Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_11"
data-name="Degradado sin nombre 11"
x1="3099.34"
y1="-1699.79"
x2="3099.85"
y2="-1699.79"
gradientTransform="translate(-44054.21 24181.14) scale(14.22)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f9b434" />
<stop offset=".16" stop-color="#f9b434" />
<stop offset=".85" stop-color="#ffd634" />
<stop offset="1" stop-color="#ffd634" />
</linearGradient>
<clipPath id="acumbamail-clippath-6">
<path
fill="none"
d="M8.7.6C3.33.6.4,2.54.04,6.71v1.88l11.06,1.35h2.6v-5.32h-2.95V.6h-2.06Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_7-2"
data-name="Degradado sin nombre 7"
x1="3219.1"
y1="-1657.94"
x2="3219.61"
y2="-1657.94"
gradientTransform="translate(-86464.4 44537.65) scale(26.86)"
xlink:href="#acumbamail-Degradado_sin_nombre_7"
/>
<clipPath id="acumbamail-clippath-7">
<polygon
fill="none"
points=".04 8.59 .04 17.33 10.75 16.58 10.75 9.98 10.75 9.93 11.1 9.93 .11 8.59 .04 8.59"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_8-2"
data-name="Degradado sin nombre 8"
x1="3167.2"
y1="-1676.56"
x2="3167.71"
y2="-1676.56"
gradientTransform="translate(-61160.54 32387.24) scale(19.31)"
xlink:href="#acumbamail-Degradado_sin_nombre_8"
/>
<clipPath id="acumbamail-clippath-8">
<path
fill="none"
d="M1.69,26.73c1.63,2.31,4.31,3.79,7.49,4.36h.32c.9-.23,6.04-1.68,7.78-5.06-.39.06-1.2.14-1.69.14-2.82,0-4.05-1.41-4.54-3.37l-9.36,3.94h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_9"
data-name="Degradado sin nombre 9"
x1="3103.14"
y1="-1529.8"
x2="3103.65"
y2="-1529.8"
gradientTransform="translate(-22294.99 -45217.7) rotate(90) scale(14.58)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#05488a" />
<stop offset=".83" stop-color="#2076b8" />
<stop offset="1" stop-color="#2680c2" />
</linearGradient>
<clipPath id="acumbamail-clippath-9">
<path
fill="none"
d="M.04,17.33v4.69c.15,1.83.73,3.4,1.65,4.7l9.36-3.94c-.22-.88-.3-1.87-.3-2.89v-3.32L.04,17.33h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_10-2"
data-name="Degradado sin nombre 10"
x1="3276.47"
y1="-1797.36"
x2="3276.98"
y2="-1797.36"
gradientTransform="translate(-62253.18 34171.52) scale(19)"
xlink:href="#acumbamail-Degradado_sin_nombre_10"
/>
<clipPath id="acumbamail-clippath-10">
<path
fill="none"
d="M24.36,4.64c-2.98.22-5.12,1.81-5.93,4.1l10.25,2.95c.33-1.35,1.54-1.78,3.28-1.76v-5.29h-7.6Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_11-2"
data-name="Degradado sin nombre 11"
x1="3154.24"
y1="-1679.36"
x2="3154.75"
y2="-1679.36"
gradientTransform="translate(-57573.98 30673.19) scale(18.26)"
xlink:href="#acumbamail-Degradado_sin_nombre_11"
/>
<clipPath id="acumbamail-clippath-11">
<path
fill="none"
d="M18.42,8.76c-.4,1.13-.48,2.41-.17,3.79.49,2.24.99,4.01,1.34,5.78h.03l9.78-1.37c-.35-1.72-.69-3.19-.75-3.58-.1-.67-.09-1.23.03-1.68l-10.2-2.93h-.06Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_12"
data-name="Degradado sin nombre 12"
x1="3116.51"
y1="-1693.09"
x2="3117.02"
y2="-1693.09"
gradientTransform="translate(-47632.82 25900.89) scale(15.29)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f8b233" />
<stop offset=".05" stop-color="#f8b233" />
<stop offset=".21" stop-color="#f5a038" />
<stop offset=".74" stop-color="#ec694b" />
<stop offset="1" stop-color="#ec694b" />
</linearGradient>
<clipPath id="acumbamail-clippath-12">
<path
fill="none"
d="M13.02,31.08l.08.31h6.02c3.92-.36,7.83-1.61,9.82-4.34l-9.05-2.64c-.59,2.89-2.81,5.19-6.86,6.66Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_13"
data-name="Degradado sin nombre 13"
x1="3367.14"
y1="-1853.65"
x2="3367.65"
y2="-1853.65"
gradientTransform="translate(-53254.17 29352.69) scale(15.82)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#be0c6e" />
<stop offset=".51" stop-color="#d41f71" />
<stop offset=".89" stop-color="#e62f71" />
<stop offset="1" stop-color="#e62f71" />
</linearGradient>
<clipPath id="acumbamail-clippath-13">
<path
fill="none"
d="M19.59,18.32c.27,1.39.45,2.81.45,4.46,0,.56-.05,1.11-.16,1.63l8.97,2.61h.1c.83-1.16,1.32-2.58,1.32-4.32,0-1.28-.45-3.7-.88-5.76l-9.81,1.37h0Z"
/>
</clipPath>
<linearGradient
id="acumbamail-Degradado_sin_nombre_14-2"
data-name="Degradado sin nombre 14"
x1="3124.76"
y1="-1750.32"
x2="3125.27"
y2="-1750.32"
gradientTransform="translate(-44849.16 25156.63) scale(14.36)"
xlink:href="#acumbamail-Degradado_sin_nombre_14"
/>
</defs>
<g clip-path="url(#acumbamail-clippath)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_14)"
x="19.79"
y="23.88"
width="9.4"
height="3.69"
/>
</g>
<g clip-path="url(#acumbamail-clippath-1)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_7)"
x=".04"
y="7.99"
width="10.71"
height="2.49"
/>
</g>
<g clip-path="url(#acumbamail-clippath-2)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_8)"
x=".04"
y="16.13"
width="10.71"
height="1.73"
/>
</g>
<g clip-path="url(#acumbamail-clippath-3)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_10)"
x="1.01"
y="19.14"
width="10.45"
height="10.84"
transform="translate(-16.23 12.84) rotate(-48.2)"
/>
</g>
<g clip-path="url(#acumbamail-clippath-4)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_5)"
x="19.53"
y="16.54"
width="9.96"
height="2.48"
/>
</g>
<g clip-path="url(#acumbamail-clippath-5)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_11)"
x="18.2"
y="8.05"
width="10.55"
height="4.22"
/>
</g>
<g clip-path="url(#acumbamail-clippath-6)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_7-2)"
x=".04"
y=".6"
width="13.66"
height="9.33"
/>
</g>
<g clip-path="url(#acumbamail-clippath-7)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_8-2)"
x=".04"
y="8.59"
width="11.06"
height="8.74"
/>
</g>
<g clip-path="url(#acumbamail-clippath-8)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_9)"
x="1.47"
y="18.22"
width="16.03"
height="17.43"
transform="translate(-17.71 18.21) rotate(-52.8)"
/>
</g>
<g clip-path="url(#acumbamail-clippath-9)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_10-2)"
x="-1.9"
y="14.17"
width="14.9"
height="14.97"
transform="translate(-14.29 11.36) rotate(-48.2)"
/>
</g>
<g clip-path="url(#acumbamail-clippath-10)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_11-2)"
x="18.42"
y="4.64"
width="13.54"
height="7.05"
/>
</g>
<g clip-path="url(#acumbamail-clippath-11)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_12)"
x="17.94"
y="8.76"
width="11.46"
height="9.56"
/>
</g>
<g clip-path="url(#acumbamail-clippath-12)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_13)"
x="15.43"
y="19.3"
width="11.09"
height="17.22"
transform="translate(-11.63 40.38) rotate(-74)"
/>
</g>
<g clip-path="url(#acumbamail-clippath-13)">
<rect
fill="url(#acumbamail-Degradado_sin_nombre_14-2)"
x="18.63"
y="15.93"
width="12.59"
height="12.13"
transform="translate(-4.11 5.82) rotate(-12.3)"
/>
</g>
</svg>
@@ -0,0 +1,22 @@
<script lang="ts">
import BrandLetterIcon from './BrandLetterIcon.svelte'
interface Props {
height?: string
width?: string
size?: number
}
let { height = '24px', width = '24px', size = undefined }: Props = $props()
</script>
<!-- #7EA2EA sampled from adrapid.com's own app favicon; they publish no vector mark or palette.
Light text darkened from it for legibility. -->
<BrandLetterIcon
letter="A"
bgClass="fill-transparent dark:fill-[#7EA2EA]"
textClass="text-[#5B89E4] dark:text-[#111111]"
{height}
{width}
{size}
/>
@@ -0,0 +1,25 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #00acc6 per adhook's own logo (https://adhook.io/fr/images/logo.svg, `.cls-1{fill:#00acc6}`). -->
<svg
{width}
{height}
viewBox="143 17 71 42"
fill="#00acc6"
fill-rule="evenodd"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M191.19,40.77l-5.74-6.27-7.66,7.63h-.11l-4.35,4.33a12.4,12.4,0,0,1-17.2.17A11.56,11.56,0,0,1,156,30a12.44,12.44,0,0,1,11.76-3.18l6.59-6.58A21.13,21.13,0,0,0,149.83,24a20,20,0,0,0,.3,28.77,21.09,21.09,0,0,0,29.33-.29Z"
/>
<path
d="M165.59,35.66l5.74,6.27L179,34.3h.11L183.44,30a12.4,12.4,0,0,1,17.21-.18,11.57,11.57,0,0,1,.18,16.65,12.45,12.45,0,0,1-11.76,3.18l-6.59,6.58A21.13,21.13,0,0,0,207,52.46a20,20,0,0,0-.3-28.78,21.11,21.11,0,0,0-29.34.3Z"
/>
</svg>
@@ -1,24 +1,24 @@
<script lang="ts">
import BrandLetterIcon from './BrandLetterIcon.svelte'
interface Props {
height?: string;
width?: string;
height?: string
width?: string
size?: number
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px', size = undefined }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="1.5" width="21" height="21" rx="4.5" fill="#EB1000" />
<path
fill="#fff"
fill-rule="evenodd"
d="M10.7 5.8h2.6L17.6 16h-2.7l-.86-2.3h-4.08L9.1 16H6.4L10.7 5.8Zm1.3 2.9-1.4 3.7h2.8L12 8.7Z"
/>
<path
d="M6.6 18.7c1.5.85 2.9.2 4.1-.45s2.5-1.05 4-.2"
stroke="#fff"
stroke-width="1.15"
stroke-linecap="round"
fill="none"
/>
</svg>
<!-- #584CCC per adobe.com/cc-shared/assets/img/product-icons/svg/acrobat-sign.svg. Adobe's mark
itself is not shipped: "Adobe does not allow the use of its product icons by third parties in
their products or related materials of any kind, except through an Adobe partnership
agreement" (adobe.com/legal/permissions/icons-web-logos.html). -->
<BrandLetterIcon
letter="A"
bgClass="fill-transparent dark:fill-[#584CCC]"
textClass="text-[#584CCC] dark:text-white"
{height}
{width}
{size}
/>
@@ -0,0 +1,21 @@
<script lang="ts">
import BrandLetterIcon from './BrandLetterIcon.svelte'
interface Props {
height?: string
width?: string
size?: number
}
let { height = '24px', width = '24px', size = undefined }: Props = $props()
</script>
<!-- #2EA8D7 per aeroworkflow.com's schema.org Organization logo; the mark itself is raster only. -->
<BrandLetterIcon
letter="A"
bgClass="fill-transparent dark:fill-[#2EA8D7]"
textClass="text-[#2596C1] dark:text-[#111111]"
{height}
{width}
{size}
/>
@@ -0,0 +1,27 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 12h-5" />
<path d="M15 8h-5" />
<path d="M19 17V5a2 2 0 0 0-2-2H4" />
<path
d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"
/>
</svg>
@@ -0,0 +1,24 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #000000 / #FFFFFF per ai21.com (ai21-logo-black.svg / ai21-logo-white.svg). -->
<svg
class="text-[#000000] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g transform="translate(-0.906 7.685) scale(0.3596)">
<path
d="M38.6929 22.5785H55.9802V17.138H51.9975V18.6189H45.7824L51.3942 15.3551C53.2042 14.2975 55.4669 12.2117 55.4669 8.79645C55.4669 4.44395 51.7863 1.21045 47.2003 1.21045C42.313 1.21045 38.7224 4.92774 38.7527 9.6126H43.1873V9.43088C43.1873 7.04302 44.9073 5.35095 47.2298 5.35095C49.5523 5.35095 51.1519 6.92267 51.1519 8.94789C51.1519 9.94495 50.7295 10.9731 49.2207 11.9096L38.6913 18.5886V22.5777L38.6929 22.5785ZM58.1521 22.5785H66.4785V18.5894H64.5776V1.42166H58.1513V5.41073H60.0825V18.5878H58.1513V22.5769L58.1521 22.5785ZM28.4353 22.5785H36.4908V18.5894H34.6505V5.41152H36.4908V1.42166H28.4353V5.41073H30.2756V18.5878H28.4353V22.5769V22.5785ZM13.3199 18.4977C9.75963 18.4977 6.83378 15.5663 6.83378 11.9694C6.83378 8.37244 9.76043 5.4713 13.3199 5.4713C16.8794 5.4713 19.7462 8.37244 19.7462 11.9694C19.7462 15.5663 16.8802 18.4977 13.3199 18.4977ZM13.3199 22.7897C15.6129 22.7897 17.6644 22.0644 19.233 20.6744L19.4139 20.523V22.5785H25.9303V18.5894H23.9991V5.41152H25.9303V1.42166H19.4139V3.41659L19.233 3.26516C17.6342 1.93573 15.6129 1.21045 13.3199 1.21045C7.40684 1.21045 2.51953 6.04595 2.51953 11.9997C2.51953 17.9534 7.40684 22.7889 13.3199 22.7889V22.7897Z"
></path>
</g>
</svg>
@@ -0,0 +1,27 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 8V4H8" />
<rect width="16" height="12" x="4" y="8" rx="2" />
<path d="M2 14h2" />
<path d="M20 14h2" />
<path d="M15 13v2" />
<path d="M9 13v2" />
</svg>
@@ -1,22 +1,31 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FCB400 per airtable.com/favicon.ico (fixed full-colour mark: #18BFFF and #F82B60 panels). -->
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
{width}
{height}
viewBox="0 0 50 50"
style="fill:currentcolor;"
viewBox="0 41.8 512 428.4"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M 24.505859 4.0078125 C 23.980484 4.0080625 23.454344 4.1114062 22.964844 4.3164062 L 4.2226562 11.646484 C 3.4796562 11.959484 3 12.683281 3 13.488281 C 2.999 14.293281 3.4771406 15.017797 4.2441406 15.341797 L 23.236328 22.775391 C 23.613328 22.935391 24.018969 23.013672 24.417969 23.013672 C 24.802969 23.013672 25.181391 22.939875 25.525391 22.796875 L 45.771484 15.330078 C 46.519484 15.018078 47.001953 14.292422 47.001953 13.482422 C 47.000953 12.672422 46.516422 11.949047 45.732422 11.623047 L 26.046875 4.3144531 C 25.556875 4.1104531 25.031234 4.0075625 24.505859 4.0078125 z M 24.498047 6.0097656 C 24.770047 6.0097656 25.0455 6.0647813 25.3125 6.1757812 L 45.041016 13.46875 L 24.794922 20.935547 C 24.551922 21.039547 24.266188 21.039828 23.992188 20.923828 L 4.9765625 13.5 L 23.705078 6.1738281 L 23.728516 6.1640625 C 23.972516 6.0610625 24.233047 6.0097656 24.498047 6.0097656 z M 1.9980469 17.001953 C 0.94204687 17.001953 -2.9605947e-16 17.853906 0 19.003906 L 0 34.970703 C 0 36.129703 0.95195312 36.972656 2.0019531 36.972656 C 2.2979531 36.972656 2.6015312 36.906766 2.8945312 36.759766 L 20.894531 27.998047 C 22.425531 27.232047 22.349531 25.022281 20.769531 24.363281 L 2.7695312 17.15625 C 2.5135313 17.05125 2.2520469 17.001953 1.9980469 17.001953 z M 48.001953 17.001953 C 47.760953 17.001953 47.514484 17.045625 47.271484 17.140625 L 28.271484 24.505859 C 27.505484 24.806859 27 25.544188 27 26.367188 L 27 42.998047 C 27 44.146047 27.940047 45 28.998047 45 C 29.239047 45 29.485516 44.956328 29.728516 44.861328 L 48.728516 37.425781 C 49.495516 37.125781 50 36.387453 50 35.564453 L 50 19.003906 C 50 17.855906 49.059953 17.001953 48.001953 17.001953 z M 2.0058594 19.003906 L 2.0253906 19.013672 L 20.017578 26.201172 L 2 34.970703 L 2.0058594 19.003906 z M 48 19.003906 L 48 35.564453 L 29 42.998047 L 28.994141 26.371094 L 48 19.003906 z"
/></svg
>
d="m228.6 47.2-190.9 79c-10.6 4.4-10.5 19.5.2 23.7l191.7 76c16.8 6.7 35.6 6.7 52.4 0l191.7-76c10.7-4.2 10.8-19.3.2-23.7L283 47.2c-17.4-7.2-37-7.2-54.4 0"
style="fill:#fcb400"
/><path
d="M272.8 267.5v189.9c0 9 9.1 15.2 17.5 11.9l213.6-82.9c4.9-1.9 8.1-6.6 8.1-11.9V184.6c0-9-9.1-15.2-17.5-11.9l-213.6 82.9c-4.9 1.9-8.1 6.6-8.1 11.9"
style="fill:#18bfff"
/><path
d="m222.9 277.3-63.4 30.6-6.4 3.1-133.8 64.1C10.8 379.2 0 373 0 363.6V185.4c0-3.4 1.7-6.4 4.1-8.6 1-1 2.1-1.8 3.2-2.4 3.2-1.9 7.8-2.4 11.6-.9l202.9 80.4c10.4 4.1 11.2 18.5 1.1 23.4"
style="fill:#f82b60"
/><path
d="m222.9 277.3-63.4 30.6L4.1 176.8c1-1 2.1-1.8 3.2-2.4 3.2-1.9 7.8-2.4 11.6-.9l202.9 80.4c10.4 4.1 11.2 18.5 1.1 23.4"
style="opacity:.29"
/>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#003DFF" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.445 0 .103 5.285.01 11.817c-.097 6.634 5.285 12.131 11.92 12.17a11.91 11.91 0 0 0 5.775-1.443.281.281 0 0 0 .052-.457l-1.122-.994a.79.79 0 0 0-.833-.14 9.693 9.693 0 0 1-3.923.77c-5.36-.067-9.692-4.527-9.607-9.888.084-5.293 4.417-9.573 9.73-9.573h9.73v17.296l-5.522-4.907a.407.407 0 0 0-.596.063 4.52 4.52 0 0 1-3.934 1.793 4.538 4.538 0 0 1-4.192-4.168 4.53 4.53 0 0 1 4.512-4.872 4.532 4.532 0 0 1 4.509 4.126c.018.205.11.397.265.533l1.438 1.275a.28.28 0 0 0 .462-.158 6.82 6.82 0 0 0 .099-1.725c-.232-3.376-2.966-6.092-6.345-6.3-3.873-.24-7.11 2.79-7.214 6.588-.1 3.7 2.933 6.892 6.634 6.974a6.75 6.75 0 0 0 4.136-1.294l7.212 6.394a.48.48 0 0 0 .797-.36V.456A.456.456 0 0 0 23.54 0Z"/>
<!-- #003DFF / #FFFFFF per algolia.com logo pack (Algolia-mark-blue.svg / Algolia-mark-white.svg). -->
<svg
class="text-[#003DFF] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 0C5.445 0 .103 5.285.01 11.817c-.097 6.634 5.285 12.131 11.92 12.17a11.91 11.91 0 0 0 5.775-1.443.281.281 0 0 0 .052-.457l-1.122-.994a.79.79 0 0 0-.833-.14 9.693 9.693 0 0 1-3.923.77c-5.36-.067-9.692-4.527-9.607-9.888.084-5.293 4.417-9.573 9.73-9.573h9.73v17.296l-5.522-4.907a.407.407 0 0 0-.596.063 4.52 4.52 0 0 1-3.934 1.793 4.538 4.538 0 0 1-4.192-4.168 4.53 4.53 0 0 1 4.512-4.872 4.532 4.532 0 0 1 4.509 4.126c.018.205.11.397.265.533l1.438 1.275a.28.28 0 0 0 .462-.158 6.82 6.82 0 0 0 .099-1.725c-.232-3.376-2.966-6.092-6.345-6.3-3.873-.24-7.11 2.79-7.214 6.588-.1 3.7 2.933 6.892 6.634 6.974a6.75 6.75 0 0 0 4.136-1.294l7.212 6.394a.48.48 0 0 0 .797-.36V.456A.456.456 0 0 0 23.54 0Z"
/>
</svg>
@@ -8,6 +8,8 @@
let { size = 16, color = undefined, class: clazz = '' }: Props = $props()
</script>
<!-- No brand colour: AMQP is an OASIS protocol, not a vendor, and amqp.org publishes no palette
(https://www.amqp.org/legal.html). Generic glyph, deliberately monochrome — keep it on currentColor. -->
<svg
xmlns="http://www.w3.org/2000/svg"
width={`${size}px`}
@@ -7,7 +7,8 @@
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- The mark is a near-black disc knocked out with a white "A", so it needs inverting
<!-- #000000 / #FFFFFF per ansible/logos community-marks (Black and White variants, CC BY-SA 4.0).
The mark is a solid disc knocked out with a white "A", so the pair is applied by inverting
rather than currentColor: recolouring the disc alone would leave white on light grey. -->
<svg
{height}
@@ -40,7 +41,7 @@
</g>
<path
d="m255.879 127.868c0 70.4551-57.1101 127.565-127.566 127.565-70.4501 0-127.566-57.1096-127.566-127.565 0-70.4501 57.1161-127.566 127.566-127.566 70.4561 0 127.566 57.1161 127.566 127.566"
fill="#1a1918"
fill="#000000"
/>
<path
d="m130.46 78.2289 33.0116 81.4763-49.8635-39.2778 16.8519-42.1984zm58.6445 100.245-50.7786-122.202c-1.44952-3.52436-4.34807-5.38926-7.86591-5.38926-3.52436 0-6.63386 1.86489-8.08339 5.38926l-55.7329 134.04h19.0653l22.0623-55.2653 65.8389 53.1899c2.64792 2.14114 4.55852 3.1095 7.0422 3.1095 4.97389 0 9.32146-3.72878 9.32146-9.11101 0-.87594-.30939-2.2662-.86941-3.76143z"
@@ -7,7 +7,15 @@
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- #141413 / #FAF9F5 per anthropics/skills. -->
<svg
class="text-[#141413] dark:text-[#FAF9F5]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"
/>
@@ -0,0 +1,25 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
/>
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
</svg>
@@ -1,22 +1,32 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #246DFF / #20A34E / #F86606 per apify.com/resources/brand. White/black variants are reserved for monochromatic contexts, so the tricolour mark stays in both themes. -->
<svg {width} {height} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Apify logo icon (extracted from official SVG) -->
<g clip-path="url(#clip0_267_4154)">
<path d="M114.695 0H196.97C198.643 0 200 1.35671 200 3.03031V128.766C200 131.778 196.083 132.945 194.434 130.425L112.159 4.68953C110.841 2.67412 112.287 0 114.695 0Z" fill="#246DFF"/>
<path d="M85.3048 0H3.0303C1.35671 0 0 1.35671 0 3.03031V128.766C0 131.778 3.91698 132.945 5.566 130.425L87.8405 4.68953C89.1593 2.67412 87.7134 0 85.3048 0Z" fill="#20A34E"/>
<path d="M98.5909 100.668L5.12683 194.835C3.22886 196.747 4.58334 200 7.27759 200H192.8C195.483 200 196.842 196.77 194.967 194.852L102.908 100.685C101.726 99.4749 99.7824 99.4676 98.5909 100.668Z" fill="#F86606"/>
</g>
<defs>
<clipPath id="clip0_267_4154">
<rect width="200" height="200" fill="white"/>
</clipPath>
</defs>
<!-- Apify logo icon (extracted from official SVG) -->
<g clip-path="url(#clip0_267_4154)">
<path
d="M114.695 0H196.97C198.643 0 200 1.35671 200 3.03031V128.766C200 131.778 196.083 132.945 194.434 130.425L112.159 4.68953C110.841 2.67412 112.287 0 114.695 0Z"
fill="#246DFF"
/>
<path
d="M85.3048 0H3.0303C1.35671 0 0 1.35671 0 3.03031V128.766C0 131.778 3.91698 132.945 5.566 130.425L87.8405 4.68953C89.1593 2.67412 87.7134 0 85.3048 0Z"
fill="#20A34E"
/>
<path
d="M98.5909 100.668L5.12683 194.835C3.22886 196.747 4.58334 200 7.27759 200H192.8C195.483 200 196.842 196.77 194.967 194.852L102.908 100.685C101.726 99.4749 99.7824 99.4676 98.5909 100.668Z"
fill="#F86606"
/>
</g>
<defs>
<clipPath id="clip0_267_4154">
<rect width="200" height="200" fill="white" />
</clipPath>
</defs>
</svg>
@@ -1,12 +1,31 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12,0C5.372,0 0,5.373 0,12 0,18.628 5.372,24 12,24 18.627,24 24,18.628 24,12A12.014,12.014 0 0 0 23.527,8.657 0.6,0.6 0 0 0 22.4,9.066H22.398C22.663,10.009 22.8,10.994 22.8,12A10.73,10.73 0 0 1 19.637,19.637 10.729,10.729 0 0 1 12,22.8 10.73,10.73 0 0 1 4.363,19.637 10.728,10.728 0 0 1 1.2,12 10.73,10.73 0 0 1 4.363,4.363 10.728,10.728 0 0 1 12,1.2C14.576,1.2 17.013,2.096 18.958,3.74A1.466,1.466 0 1 0 19.82,2.9 11.953,11.953 0 0 0 12,0ZM10.56,5.88 6.36,16.782H8.99L9.677,14.934H13.646L12.927,12.892H10.314L12.014,8.201 15.038,16.781H17.669L13.47,5.88Z"/>
<!-- #1F1F1E / #F8FF2C per apollo.io. -->
<svg
class="text-[#1F1F1E] dark:text-[#F8FF2C]"
{width}
{height}
viewBox="0 0 303 303"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M166.362 110.96L166.312 0.721829C161.444 0.251801 156.492 0 151.507 0C139.371 0 127.571 1.44366 116.257 4.12954L149.862 109.987C151.759 115.946 144.507 120.545 139.925 116.298L53.2608 36.1922C40.9738 46.6671 30.3821 59.0725 21.939 72.9551L132.438 131.407C147.831 139.548 166.362 128.385 166.362 110.96Z"
/>
<path
d="M136.272 192.56L136.322 302.245C141.324 302.748 146.393 303 151.513 303C163.464 303 175.097 301.607 186.259 298.988L152.772 193.534C150.875 187.575 158.126 182.975 162.709 187.222L249.272 267.228C261.609 256.803 272.251 244.431 280.745 230.599L170.195 172.131C154.803 163.989 136.272 175.153 136.272 192.577V192.56Z"
/>
<path
d="M186.777 140.371L267.045 53.5167C256.571 41.1785 244.167 30.5357 230.285 22.0752L171.67 132.901C163.529 148.295 174.691 166.827 192.115 166.81L302.245 166.76C302.748 161.741 303 156.654 303 151.501C303 139.515 301.607 127.865 298.972 116.685L193.088 150.309C187.129 152.206 182.53 144.954 186.777 140.371Z"
/>
<path
d="M110.516 136.711L0.721779 136.761C0.251783 141.612 0 146.531 0 151.5C0 163.62 1.42677 175.387 4.11246 186.685L109.526 153.212C115.485 151.315 120.084 158.567 115.837 163.15L36.005 249.534C46.4457 261.822 58.7998 272.431 72.6311 280.875L130.944 170.62C139.085 155.226 127.923 136.694 110.499 136.694L110.516 136.711Z"
/>
</svg>
@@ -1,21 +1,29 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FD366E ("Appwrite Pink") per https://appwrite.io/assets. Brand asks that the logo not be altered, so no per-theme variant. -->
<svg
x="0px"
y="0px"
{width}
{height}
viewBox="0 0 168 168"
viewBox="0 30.3 512 451.5"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
style="fill:currentcolor;"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.716 139.591C101.618 139.591 92.1532 136.884 84.0067 132.157C77.8943 135.694 71.1023 138.062 63.9721 139.059C49.4512 141.09 34.7181 137.269 23.0142 128.437C17.2134 124.066 12.3308 118.594 8.64533 112.336C4.95993 106.077 2.54395 99.1532 1.53545 91.9602C0.527001 84.7672 0.94584 77.4461 2.768 70.4149C4.59016 63.3838 7.77996 56.7809 12.1551 50.9832C16.5302 45.1854 22.005 40.3066 28.2664 36.6256C34.5278 32.9446 41.4532 30.5335 48.6472 29.5301C55.8407 28.5267 63.1613 28.9507 70.1914 30.7777C75.0433 32.0389 79.6913 33.9515 84.0104 36.4554C92.1563 31.7292 101.62 29.023 111.716 29.023C142.249 29.023 167 53.7741 167 84.307C167 114.84 142.249 139.591 111.716 139.591ZM74.7533 43.1944L74.7699 43.1799C67.0929 39.7354 58.5382 38.4798 50.0717 39.6638C38.2317 41.3196 27.534 47.6111 20.3325 57.1542C13.1311 66.6976 10.0156 78.7102 11.6714 90.5507C13.3272 102.391 19.6187 113.088 29.1618 120.29C38.7048 127.491 50.718 130.607 62.558 128.951C74.3985 127.295 85.0961 121.003 92.2974 111.46C99.4987 101.917 102.614 89.9044 100.958 78.0639C100.194 72.6015 98.4441 67.3823 95.8425 62.6373C91.1307 54.0783 83.7183 47.2148 74.7533 43.1944Z"/>
<path d="M57.7961 65.1797C57.7297 65.3431 56.8847 68.6631 55.9743 72.6009C55.0296 76.5387 53.5325 82.7544 52.688 86.4318C51.0591 93.1683 50.0828 97.5943 50.0828 98.1805C50.0828 98.3418 51.0923 98.4736 52.328 98.4736H54.5747L55.5821 93.9812C56.1693 91.541 57.4714 85.9432 58.5125 81.5499C59.5542 77.156 60.8225 71.8191 61.3117 69.6705C61.7988 67.5223 62.287 65.5713 62.3855 65.3431C62.4836 65.0505 61.929 64.9535 60.2374 64.9535C58.9675 64.9535 57.8599 65.0505 57.7961 65.1797ZM40.3189 79.2715L37.3247 82.5267L38.2045 83.5673C38.6911 84.1524 40.0269 85.6179 41.1661 86.8224L43.2488 89.0344H49.1719L46.3738 86.0075C44.843 84.3822 43.5736 82.8192 43.5736 82.6242C43.5736 82.3965 44.7459 80.9325 46.1782 79.3701C47.6094 77.7765 48.7813 76.4075 48.7813 76.2451C48.7813 76.1149 47.5446 76.0174 46.048 76.0174H43.3469L40.3189 79.2715ZM63.1004 76.2119C63.1004 76.311 63.6539 76.9283 64.336 77.612C66.8763 80.1503 68.666 82.2995 68.568 82.7212C68.5037 82.95 67.2659 84.4782 65.7698 86.0734L63.0698 89.0344H66.0951L69.122 89.0022L71.8869 85.9764C73.4178 84.2852 74.654 82.786 74.654 82.591C74.654 82.4297 73.3524 80.8993 71.7246 79.1755L68.7967 76.0174H65.9639C64.3692 76.0174 63.1004 76.1149 63.1004 76.2119Z"/>
<style>
.appwrite-st0 {
fill: #fd366e;
}
</style><path
d="M512 368.9v112.9H225.2c-83.6 0-156.5-45.4-195.5-112.9-5.7-9.8-10.6-20.1-14.8-30.8C6.7 317.2 1.6 294.7 0 271.3v-30.5c.3-5.2.9-10.4 1.6-15.5C3 214.7 5.2 204.4 8 194.4 34.8 99.7 121.9 30.3 225.2 30.3s190.4 69.4 217.2 164.2H319.8c-20.1-30.9-55-51.3-94.6-51.3s-74.5 20.4-94.6 51.3c-6.1 9.4-10.9 19.7-14 30.8-2.8 9.8-4.2 20.1-4.2 30.8 0 32.4 13.6 61.5 35.4 82.1 20.2 19.1 47.5 30.8 77.4 30.8H512z"
class="appwrite-st0"
/><path
d="M512 225.2v112.9H302.7c21.8-20.6 35.4-49.7 35.4-82.1 0-10.7-1.5-21-4.2-30.8z"
class="appwrite-st0"
/>
</svg>
@@ -0,0 +1,15 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #006FDE per Esri's ArcGIS Pro product logo (esri.com/content/dam/esrisites/en-us/common/icons/product-logos/arcgis-pro-64.svg). Esri publishes no reversed variant for this badge and forbids altering its logos. -->
<svg {width} {height} viewBox="0 0 24 24" fill="#006FDE" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0a.84923.84923 0 0 0-.33766.07031l-8.5183 3.69444C2.1458 4.19776 1.4997 5.1816 1.4997 6.2697v13.2521l10.16264 4.40783c.21517.09333.46015.09407.67532.00073l8.5183-3.6959c.99824-.43301 1.64434-1.41685 1.64434-2.50495V4.47814L12.33766.06958C12.23007.02291 12.11516-.00005 12 0Zm0 4.83705c4.16294 0 7.53757 3.3746 7.53757 7.53757S16.163 19.91218 12 19.91218c-4.163 0-7.53757-3.37462-7.53757-7.53756S7.837 4.83705 12 4.83705zm-.3501 1.38871c-.89685-.02267-2.32742.2409-3.74645 1.6143.34958.55454.64544.97782.49 1.41801-.23127.65503-.5139.51378-1.07083.99466-.39567.34169.2067 1.01292-.31275 1.30595-.51945.29306-1.21315.6636-.94925 1.17557.2639.51196 1.4691.83013 1.95929 1.07522.49018.2451.92812.70605.6072 1.2371-.31403.51948-.53713 1.13083-.60134 1.60917 1.0549.94423 2.44706 1.51909 3.97423 1.51909 3.2928 0 5.81772-2.71048 5.96208-6.00017.04062-.92531-.93924-.93972-1.53447-.93972 0 0 .34061.92356.01831 1.43632-.3223.51278-.84968.76166-.83498 1.37699.01464.61533-.93743 1.5967-1.2598 1.9483-.32223.35163-.9228.74718-1.12796-.0586-.2051-.80579-.12596-1.47799.1084-2.04938.23442-.57136-.2174-.74707-.92068-.76174-.7032-.01463-1.0798-.10795-1.18656-1.19315-.08787-.89369 1.2429-1.84356 1.81426-1.84356.33406 0 1.45485.21963 1.50737-.34058.08056-.8593-.8204-1.04164-1.03934-1.60185C13.2877 7.58747 14.98596 6.60707 12 6.24993c-.10475-.01253-.22199-.02093-.3501-.02417z"
/>
</svg>
@@ -7,6 +7,7 @@
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FF584A on both themes per asana.com/brand. Asana's guidelines forbid recolouring: the symbol always appears in coral, on light and dark backgrounds alike. -->
<svg
{width}
{height}
@@ -16,7 +17,7 @@
><title>Asana</title><g
><path
d="M200.324957,125.270044 C169.575962,125.270044 144.649915,150.19729 144.649915,180.947483 C144.649915,211.696478 169.575962,236.623724 200.324957,236.623724 C231.073952,236.623724 256,211.696478 256,180.947483 C256,150.19729 231.073952,125.270044 200.324957,125.270044 L200.324957,125.270044 Z M55.6754021,125.274837 C24.9270063,125.274837 0,150.19729 0,180.947483 C0,211.696478 24.9270063,236.623724 55.6754021,236.623724 C86.425116,236.623724 111.35332,211.696478 111.35332,180.947483 C111.35332,150.19729 86.425116,125.274837 55.6754021,125.274837 L55.6754021,125.274837 Z M183.674444,55.674204 C183.674444,86.425116 158.748396,111.354638 128.000599,111.354638 C97.2505258,111.354638 72.3247177,86.425116 72.3247177,55.674204 C72.3247177,24.9294026 97.2505258,0 128.000599,0 C158.748396,0 183.674444,24.9294026 183.674444,55.674204 L183.674444,55.674204 Z"
fill="#F06A6A"
fill="#FF584A"
/></g
></svg
>
@@ -0,0 +1,28 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #1D1B16 / #C7C3B2 per assemblyai.com (assemblyai-logo-full-primary.svg /
assemblyai-logo-full-secondary.svg). Two colours per theme, so the second stroke carries its
own fill- utilities: #777673 on light, #FFFFFF on dark. -->
<svg
class="text-[#1D1B16] dark:text-[#C7C3B2]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.595 1.5a3.695 3.695 0 00-3.444 2.355L0 22.26h5.432l5.629-14.486h.002a.96.96 0 011.782 0h.75V4.835h-1.393L13.498 1.5h-2.902z"
/>
<path
class="fill-[#777673] dark:fill-[#FFFFFF]"
d="M7.151 3.855a3.695 3.695 0 013.26-2.35l-.002-.005H13.405c1.524 0 2.893.936 3.444 2.355L24 22.26h-5.525L11.54 4.413a2.528 2.528 0 00-4.609.006l.22-.564z"
/>
</svg>
@@ -6,7 +6,12 @@
class?: string
}
let { height = '24px', width = '24px', fill = 'black', class: className = '' }: Props = $props()
let {
height = '24px',
width = '24px',
fill = 'currentColor',
class: className = ''
}: Props = $props()
</script>
<svg
@@ -6,7 +6,12 @@
class?: string
}
let { height = '24px', width = '24px', fill = 'black', class: className = '' }: Props = $props()
let {
height = '24px',
width = '24px',
fill = 'currentColor',
class: className = ''
}: Props = $props()
</script>
<svg
@@ -0,0 +1,28 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #1C1D1F / #FFFFFF per the attio.com header logo (--color-black-100 / --color-white-100). The
mark is a filled compound path; stroking it instead thickens it and leaks the default black fill. -->
<svg
class="text-[#1C1D1F] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.7802 11.5317L15.4723 9.43851C15.4723 9.43851 15.4674 9.42975 15.4645 9.42586L15.3613 9.2614C15.1667 8.94902 14.83 8.76218 14.4622 8.76121L12.3553 8.75439L12.2084 8.98989L9.69085 13.0187L9.55169 13.2415L10.6066 14.927C10.8012 15.2404 11.1379 15.4272 11.5087 15.4272H14.4612C14.8251 15.4272 15.1696 15.2355 15.3623 14.928L15.4664 14.7616C15.4664 14.7616 15.4703 14.7567 15.4713 14.7548L16.7812 12.6586C16.9962 12.3161 16.9962 11.8733 16.7812 11.5317H16.7802ZM16.3812 12.4085L15.0714 14.5047C15.0655 14.5144 15.0587 14.5222 15.0529 14.53C15.0071 14.5816 14.9478 14.5884 14.9215 14.5884C14.8913 14.5884 14.8174 14.5796 14.7697 14.5037L13.4598 12.4076C13.4452 12.3842 13.4326 12.3599 13.4209 12.3336C13.4092 12.3083 13.4005 12.283 13.3927 12.2567C13.3635 12.1516 13.3635 12.0387 13.3927 11.9336C13.4073 11.8821 13.4297 11.8305 13.4589 11.7838L14.7668 9.68958C14.7668 9.68958 14.7687 9.68666 14.7697 9.68472C14.8008 9.63801 14.8397 9.6166 14.8738 9.60979C14.8874 9.60589 14.8991 9.60492 14.9088 9.60297C14.9137 9.60297 14.9186 9.60297 14.9234 9.60297C14.9536 9.60297 15.0285 9.61271 15.0752 9.68861L16.3831 11.7818C16.5028 11.9726 16.5028 12.2178 16.3831 12.4085H16.3812Z"
fill="currentColor"
/>
<path
d="M12.9099 6.46677C13.124 6.12325 13.124 5.68145 12.9099 5.33988L11.602 3.24665L11.493 3.07051C11.2974 2.75813 10.9607 2.57129 10.5909 2.57129H7.63838C7.26956 2.57129 6.93285 2.75813 6.73628 3.07148L1.4492 11.5329C1.34313 11.7023 1.28571 11.8979 1.28571 12.0964C1.28571 12.2949 1.34216 12.4905 1.44823 12.6589L2.8661 14.9292C3.0617 15.2426 3.3984 15.4284 3.76722 15.4284H6.71974C7.0905 15.4284 7.42721 15.2416 7.62184 14.9282L7.72986 14.757C7.72986 14.757 7.72986 14.757 7.72986 14.755C7.72986 14.755 7.7318 14.7521 7.7318 14.7511L8.78572 13.0656L11.9095 8.06662L12.9079 6.46775L12.9099 6.46677ZM12.6014 5.90332C12.6014 6.01134 12.5712 6.12034 12.5099 6.21668L7.33087 14.5059C7.28416 14.5808 7.20923 14.5896 7.17906 14.5896C7.14889 14.5896 7.07493 14.5808 7.02725 14.5059L5.71837 12.4088C5.59965 12.219 5.59965 11.9748 5.71837 11.783L10.8974 3.49577C10.9441 3.41987 11.0191 3.41111 11.0492 3.41111C11.0794 3.41111 11.1543 3.41987 11.202 3.49675L12.5099 5.58997C12.5712 5.68631 12.6014 5.79531 12.6014 5.90332V5.90332Z"
fill="currentColor"
/>
</svg>
@@ -1,4 +1,5 @@
<script lang="ts">
import { twMerge } from 'tailwind-merge'
interface Props {
size?: number
height?: number
@@ -20,17 +21,27 @@
)
</script>
<!-- #232220 / #FFFFFF per auth0.com docs logo light.svg / dark.svg. Okta's content terms forbid altering the mark, so ship only these published variants. -->
<svg
role="img"
{width}
{height}
viewBox="0 0 256 285"
viewBox="0 0 19.7865 24"
fill={color ?? 'currentColor'}
xmlns="http://www.w3.org/2000/svg"
class={clazz}
class={twMerge('text-[#232220] dark:text-[#FFFFFF]', clazz)}
>
<title>auth0-svg</title>
<path
d="M220.412 0H127.997L156.559 89.006H248.975L174.205 142.083L202.775 231.594C250.903 196.534 266.629 143.474 248.983 89.006L220.412 0ZM7.01792 89.006H99.4339L127.997 0H35.5889L7.01792 89.006ZM7.01792 89.006C-10.6371 143.474 5.09792 196.535 53.2249 231.594L81.7879 142.084L7.01792 89.006ZM53.2259 231.594L127.996 284.564L202.766 231.594L127.996 177.747L53.2259 231.594Z"
d="M1.26834 10.2499C5.20746 9.60217 8.29463 6.51809 8.94341 2.58331L9.259 0.669875C9.31961 0.299735 9.01532 -0.0268029 8.64069 0.00174179C5.64144 0.23355 2.81491 1.2254 1.2539 1.86467C0.495844 2.17553 0 2.91142 0 3.73043V9.77877C0 10.1345 0.31842 10.4052 0.670128 10.3475L1.26834 10.2499Z"
/>
<path
d="M10.8431 2.58304C11.4915 6.51782 14.579 9.60158 18.5181 10.2496L19.1163 10.3475C19.4681 10.4052 19.7865 10.1345 19.7865 9.77881V3.73047C19.7865 2.91115 19.2906 2.17557 18.5326 1.86472C16.9716 1.22419 14.1438 0.233592 11.1458 0.00178354C10.7712 -0.0270748 10.4656 0.298523 10.5275 0.669918L10.8431 2.58304Z"
/>
<path
d="M18.5182 12.1463C14.5791 12.794 11.4919 15.8781 10.8431 19.8129L10.4497 23.5475C10.4136 23.8844 10.7885 24.1219 11.0708 23.9333C11.0736 23.9318 11.0752 23.9305 11.078 23.929C13.5485 22.2646 19.1839 17.9079 19.7416 12.4659C19.769 12.198 19.5313 11.9794 19.2659 12.0224L18.5192 12.1447L18.5182 12.1463Z"
/>
<path
d="M8.94451 19.8092C8.29605 15.8744 5.20857 12.7906 1.26945 12.1426L0.466486 12.0102C0.230026 11.9713 0.018374 12.167 0.0412978 12.406C0.570115 17.8785 6.28347 22.2624 8.77557 23.9296C9.0337 24.1009 9.37504 23.8951 9.34207 23.5871L8.94451 19.8092Z"
/>
</svg>
@@ -1,32 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335.000000 335.000000" width="24" height="24" >
<title>authelia-svg</title>
<g transform="translate(0.000000,335.000000) scale(0.100000,-0.100000)" fill="#3F51B4" stroke="none">
<path d="M1359 3300 c-142 -23 -312 -83 -477 -170 -422 -222 -751 -668 -836
<!-- #3F51B4 per authelia.com/images/branding/logo-cropped.svg (light stop of the official #3F51B4→#113155 gradient, flattened).
authelia.com/reference/guides/branding permits format/layout changes only — do not alter the design. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335.000000 335.000000" width="24" height="24">
<title>authelia-svg</title>
<g
transform="translate(0.000000,335.000000) scale(0.100000,-0.100000)"
fill="#3F51B4"
stroke="none"
>
<path
d="M1359 3300 c-142 -23 -312 -83 -477 -170 -422 -222 -751 -668 -836
-1130 -31 -172 -36 -276 -21 -456 20 -235 69 -414 168 -610 56 -112 173 -280
251 -360 67 -70 74 -74 115 -74 57 0 111 49 111 103 0 36 -13 57 -87 141 -57
64 -156 212 -198 296 -50 99 -102 256 -126 383 -31 155 -31 388 0 534 94 447
385 818 795 1014 120 57 239 93 396 119 63 11 125 22 138 25 52 12 81 119 44
165 -15 19 -29 22 -117 25 -55 2 -125 0 -156 -5z"/>
<path d="M2049 2801 c-23 -24 -29 -38 -29 -73 0 -56 19 -82 83 -114 281 -142
165 -15 19 -29 22 -117 25 -55 2 -125 0 -156 -5z"
/>
<path
d="M2049 2801 c-23 -24 -29 -38 -29 -73 0 -56 19 -82 83 -114 281 -142
464 -357 552 -649 34 -113 61 -145 122 -145 33 0 50 7 75 29 30 27 33 34 31
83 -3 102 -83 298 -184 453 -64 98 -229 264 -324 326 -188 124 -269 147 -326
90z"/>
<path d="M1030 2750 c-113 -68 -175 -118 -263 -209 -315 -330 -418 -808 -271
90z"
/>
<path
d="M1030 2750 c-113 -68 -175 -118 -263 -209 -315 -330 -418 -808 -271
-1256 136 -417 487 -726 929 -821 98 -20 360 -24 454 -5 321 63 602 234 785
478 85 114 151 244 151 301 0 58 -45 102 -104 102 -55 0 -84 -27 -136 -129
-180 -348 -561 -567 -950 -548 -241 12 -474 110 -657 276 -130 118 -237 296
-285 477 -23 88 -26 119 -27 269 -1 148 2 181 22 255 28 101 93 242 152 331
59 88 191 215 279 269 41 25 92 62 114 83 37 35 39 40 34 80 -4 30 -15 50 -37
70 -47 42 -90 37 -190 -23z"/>
<path d="M1528 2494 c-312 -56 -570 -293 -652 -599 -24 -87 -31 -249 -16 -342
70 -47 42 -90 37 -190 -23z"
/>
<path
d="M1528 2494 c-312 -56 -570 -293 -652 -599 -24 -87 -31 -249 -16 -342
53 -330 298 -595 623 -673 158 -38 369 -22 512 40 177 76 329 219 415 391 187
371 69 825 -273 1053 -186 124 -396 169 -609 130z m216 -266 c25 -8 59 -31 86
-58 94 -94 94 -219 -1 -313 l-48 -49 64 -261 c72 -291 72 -297 12 -355 -43
-42 -105 -62 -191 -62 -115 0 -206 56 -221 137 -4 17 19 129 58 287 l65 258
-41 37 c-103 93 -103 245 1 332 67 56 135 71 216 47z"/>
<path d="M3034 2306 c-42 -42 -43 -69 -9 -159 50 -135 69 -256 69 -457 1 -206
-41 37 c-103 93 -103 245 1 332 67 56 135 71 216 47z"
/>
<path
d="M3034 2306 c-42 -42 -43 -69 -9 -159 50 -135 69 -256 69 -457 1 -206
-10 -279 -69 -457 -118 -354 -379 -654 -714 -823 -96 -48 -283 -106 -401 -125
-158 -25 -178 -32 -200 -68 -61 -99 20 -179 165 -162 702 79 1290 633 1421
1340 25 134 25 437 0 575 -26 150 -80 311 -114 343 -43 41 -103 38 -148 -7z"/>
</g>
1340 25 134 25 437 0 575 -26 150 -80 311 -114 343 -43 41 -103 38 -148 -7z"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -1,27 +1,19 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="24" height="24">
<title>authentik-svg</title>
<defs>
<style>.cls-1 {
fill: #fd4b2d;
}
</style>
</defs>
<rect class="cls-1" x="546.66" y="275.34" width="34.99" height="99.97"/>
<rect class="cls-1" x="637.66" y="271.13" width="34.99" height="78.19"/>
<path class="cls-1"
d="M127.64,385.31a127.57,127.57,0,0,0-112.13,66.9H74.82c26.27-22.67,64.42-29.28,92,0h62.8C205.11,419.06,168.36,385.31,127.64,385.31Z"/>
<path class="cls-1"
d="M212.39,512.53C130.55,683.65-12.89,537.81,74.82,452.21H15.51C-31,533.33,33.3,642.73,127.64,640.24c73,0,133.2-108.3,133.2-127.46,0-8.47-11.78-34.33-31.2-60.57h-62.8C187.65,471.08,205.81,498.56,212.39,512.53Zm2.17-5h0Z"/>
<path class="cls-1"
d="M999.94,274.11V725.89c0,86.58-70.42,157.06-157.05,157.06H776.22V729.12H457.88V883H391.22c-86.64,0-157.06-70.48-157.06-157.06V583.81H738.87V312.11H495.24V464.76H234.16V274.11a151.29,151.29,0,0,1,1.06-18,154.4,154.4,0,0,1,3.88-21.15c.58-2.23,1.23-4.46,1.88-6.64a13.66,13.66,0,0,1,.52-1.64c.36-1.12.71-2.17,1.06-3.23s.76-2.17,1.18-3.23c.47-1.23.88-2.41,1.35-3.58s1-2.35,1.47-3.53a159,159,0,0,1,14.27-26.49c.06-.06.12-.17.17-.23,1.41-2.06,2.88-4.11,4.41-6.17,1.29-1.7,2.58-3.35,3.88-5,1.52-1.82,3.11-3.7,4.69-5.46s3.12-3.47,4.76-5.11l.18-.18a36.53,36.53,0,0,1,2.64-2.64,159.75,159.75,0,0,1,18.68-15.63c1.76-1.29,3.64-2.52,5.52-3.76,2.11-1.35,4.23-2.64,6.4-3.93,4.11-2.41,8.28-4.64,12.63-6.64,1.35-.64,2.76-1.29,4.11-1.88a152.81,152.81,0,0,1,18.38-6.63c2.41-.71,4.82-1.35,7.29-1.94,1.17-.3,2.35-.59,3.58-.82a158.5,158.5,0,0,1,21.26-3.12l3.12-.17c.52,0,1-.06,1.52-.06,2.35-.12,4.76-.18,7.17-.18H842.89c2.4,0,4.81.06,7.16.18.53,0,1,.06,1.53.06l3.11.17A158.26,158.26,0,0,1,876,120.58c1.24.23,2.41.52,3.59.82,2.46.59,4.87,1.23,7.28,1.94A152.81,152.81,0,0,1,905.2,130c1.35.59,2.76,1.24,4.11,1.88,4.35,2,8.52,4.23,12.63,6.64,2.18,1.29,4.29,2.58,6.4,3.93,1.88,1.24,3.76,2.47,5.52,3.76a157.53,157.53,0,0,1,21.5,18.45c1.65,1.64,3.23,3.34,4.76,5.11s3.17,3.64,4.7,5.46c1.29,1.64,2.58,3.29,3.87,5,1.53,2.06,3,4.11,4.41,6.17.06.06.12.17.18.23a159.71,159.71,0,0,1,14.27,26.49c.47,1.18,1,2.35,1.47,3.53s.88,2.35,1.35,3.58c.41,1.06.82,2.11,1.17,3.23s.71,2.11,1.06,3.23a15.74,15.74,0,0,1,.53,1.64c.64,2.18,1.29,4.41,1.88,6.64a155.92,155.92,0,0,1,3.87,21.15A151.29,151.29,0,0,1,999.94,274.11Z"/>
<path class="cls-1"
d="M973.27,186.59H260.84A157.05,157.05,0,0,1,391.2,117.07H842.9A157.08,157.08,0,0,1,973.27,186.59Z"/>
<path class="cls-1"
d="M998.94,256.1H235.16a155.35,155.35,0,0,1,25.68-69.51H973.27A155.34,155.34,0,0,1,998.94,256.1Z"/>
<path class="cls-1"
d="M1000,274.11v51.51H738.87V312.11H495.24v13.51H234.1V274.11a153.41,153.41,0,0,1,1.06-18H998.94A151.29,151.29,0,0,1,1000,274.11Z"/>
<rect class="cls-1" x="234.1" y="325.62" width="261.13" height="69.54"/>
<rect class="cls-1" x="738.87" y="325.62" width="261.13" height="69.54"/>
<rect class="cls-1" x="234.1" y="395.16" width="261.13" height="69.48"/>
<rect class="cls-1" x="738.87" y="395.16" width="261.13" height="69.48"/>
<!-- #FD4B2D / #FFFFFF per goauthentik.io/press. The white variant is the brand's own asset for dark backgrounds; proportions and colour must not be altered otherwise. -->
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 1000"
width="24"
height="24"
fill="currentColor"
class="text-[#FD4B2D] dark:text-[#FFFFFF]"
>
<title>authentik-svg</title>
<path
d="M830.2,118.09h-425.28c-93.1,0-169.27,76.17-169.27,169.27v425.28c0,93.1,76.17,169.27,169.27,169.27h50.18v-165.68h324.96v165.68h50.14c93.1,0,169.27-76.17,169.27-169.27v-425.28c0-93.1-76.17-169.27-169.27-169.27ZM756.51,581.62H235.93v-114.49h268.96v-158.97h43.68v94.7h25.61v-94.7h30.88v69.64h25.61v-69.64h30.88v116.35h25.61v-116.35h43.68v158.97h25.69v114.49Z"
/>
<path
d="M237.89,460.28h-.02c-25.34-34.27-63.32-69.15-105.42-69.15-48.4.03-92.89,26.58-115.91,69.15-48.08,83.85,18.39,196.94,115.91,194.36,75.46,0,137.69-111.95,137.69-131.75,0-8.76-12.18-35.49-32.25-62.61ZM77.85,460.28c27.16-23.43,66.59-30.27,95.1,0h.02c21.51,19.51,40.28,47.91,47.08,62.35-84.6,176.88-232.87,26.13-142.2-62.35Z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,12 +1,16 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #ED7100 tile with a #FFFFFF glyph per the AWS Architecture Icons package
(Icon-package_07312026, Arch_Containers/Arch_Amazon-Elastic-Container-Registry). AWS ships one flat
fill for both themes; the gradient tile was retired in the 2023 accessibility refresh. -->
<svg
x="0px"
y="0px"
@@ -17,7 +21,7 @@
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_305_193)">
<path d="M168 0H0V168H168V0Z" fill="url(#paint0_linear_305_193)" />
<path d="M168 0H0V168H168V0Z" fill="#ED7100" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
@@ -26,17 +30,6 @@
/>
</g>
<defs>
<linearGradient
id="paint0_linear_305_193"
x1="0"
y1="16800"
x2="16800"
y2="0"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C8511B" />
<stop offset="1" stop-color="#FF9900" />
</linearGradient>
<clipPath id="clip0_305_193">
<rect width="168" height="168" fill="white" />
</clipPath>
@@ -1,33 +1,38 @@
<!-- #252F3E / #FFFFFF wordmark, #FF9900 smile, per AWS's own logo files (d0.awsstatic.com/logos/powered-by-aws{,-white}.png).
aws.amazon.com/trademark-guidelines forbids altering the logo's colour, so only these two published variants may be used. -->
<script lang="ts">
import { twMerge } from 'tailwind-merge'
interface Props {
size?: number;
color?: string | undefined;
class?: string;
// `size` is what dynamic call sites pass (RowIcon, TriggersBadge, ToggleButton,
// global search); width/height stay for the ones that pass those instead.
size?: number
height?: string | number
width?: string | number
class?: string
}
let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
let { size = 16, height = undefined, width = undefined, class: clazz = '' }: Props = $props()
</script>
<svg
width={size}
height={size}
viewBox="0 0 168 168"
class={clazz}
class={twMerge('text-[#252F3E] dark:text-white', clazz)}
width={width ?? size}
height={height ?? size}
viewBox="0.02 102.6 511.9 306.4"
xmlns="http://www.w3.org/2000/svg"
fill={color ?? 'currentColor'}
>
<path
d="M47.7805 70.052C47.7805 72.0948 48.0013 73.7511 48.3878 74.9657C48.8295 76.1803 49.3816 77.5054 50.1545 78.9408C50.4306 79.3825 50.541 79.8242 50.541 80.2106C50.541 80.7627 50.2097 81.3148 49.492 81.8669L46.0138 84.1858C45.5169 84.517 45.02 84.6826 44.5783 84.6826C44.0262 84.6826 43.4741 84.4066 42.922 83.9097C42.1491 83.0816 41.4866 82.1982 40.9345 81.3148C40.3824 80.3763 39.8303 79.3273 39.223 78.0575C34.9166 83.1368 29.506 85.6764 22.9913 85.6764C18.3536 85.6764 14.6546 84.3514 11.9493 81.7013C9.24402 79.0512 7.86377 75.5178 7.86377 71.101C7.86377 66.4082 9.52007 62.5987 12.8879 59.7278C16.2557 56.8569 20.7277 55.4214 26.4143 55.4214C28.2914 55.4214 30.2238 55.5871 32.2665 55.8631C34.3093 56.1392 36.4073 56.5808 38.6157 57.0777V53.0474C38.6157 48.8515 37.7323 45.9253 36.0208 44.2138C34.2541 42.5023 31.2727 41.6742 27.0216 41.6742C25.0892 41.6742 23.1017 41.895 21.0589 42.3919C19.0162 42.8888 17.0286 43.4961 15.0963 44.269C14.2129 44.6555 13.5504 44.8763 13.1639 44.9868C12.7774 45.0972 12.5014 45.1524 12.2806 45.1524C11.5076 45.1524 11.1212 44.6003 11.1212 43.4409V40.7356C11.1212 39.8522 11.2316 39.1897 11.5076 38.8033C11.7837 38.4168 12.2806 38.0303 13.0535 37.6439C14.9858 36.6501 17.3047 35.8219 20.0099 35.1594C22.7152 34.4417 25.5861 34.1104 28.6227 34.1104C35.1926 34.1104 39.9959 35.6011 43.0877 38.5824C46.1242 41.5637 47.6701 46.091 47.6701 52.164V70.052H47.7805ZM25.3653 78.4439C27.1872 78.4439 29.0644 78.1127 31.0519 77.4502C33.0395 76.7876 34.8062 75.573 36.2968 73.9167C37.1802 72.8677 37.8427 71.7083 38.174 70.3833C38.5052 69.0583 38.7261 67.4572 38.7261 65.58V63.2612C37.125 62.8748 35.4135 62.5435 33.6468 62.3227C31.8801 62.1018 30.1685 61.9914 28.457 61.9914C24.758 61.9914 22.0527 62.7091 20.2308 64.1998C18.4088 65.6905 17.5255 67.7884 17.5255 70.5489C17.5255 73.1438 18.188 75.0761 19.5683 76.4012C20.8933 77.7814 22.8256 78.4439 25.3653 78.4439ZM69.6988 84.4066C68.705 84.4066 68.0425 84.241 67.6008 83.8545C67.1591 83.5232 66.7727 82.7503 66.4414 81.7013L53.4671 39.0241C53.1358 37.9199 52.9702 37.2022 52.9702 36.8157C52.9702 35.9323 53.4119 35.4355 54.2952 35.4355H59.7058C60.7548 35.4355 61.4725 35.6011 61.859 35.9876C62.3007 36.3188 62.6319 37.0918 62.9632 38.1407L72.2384 74.6897L80.8512 38.1407C81.1272 37.0365 81.4585 36.3188 81.9002 35.9876C82.3418 35.6563 83.1148 35.4355 84.1086 35.4355H88.5253C89.5743 35.4355 90.2921 35.6011 90.7337 35.9876C91.1754 36.3188 91.5619 37.0918 91.7827 38.1407L100.506 75.1313L110.057 38.1407C110.388 37.0365 110.775 36.3188 111.161 35.9876C111.603 35.6563 112.321 35.4355 113.315 35.4355H118.449C119.332 35.4355 119.829 35.8771 119.829 36.8157C119.829 37.0918 119.774 37.3678 119.719 37.6991C119.664 38.0303 119.553 38.472 119.332 39.0793L106.027 81.7565C105.696 82.8607 105.309 83.5784 104.867 83.9097C104.426 84.241 103.708 84.4618 102.769 84.4618H98.0214C96.9725 84.4618 96.2547 84.2962 95.813 83.9097C95.3714 83.5232 94.9849 82.8055 94.7641 81.7013L86.2065 46.091L77.7042 81.6461C77.4282 82.7503 77.0969 83.468 76.6552 83.8545C76.2136 84.241 75.4406 84.4066 74.4468 84.4066H69.6988ZM140.643 85.8973C137.773 85.8973 134.902 85.566 132.141 84.9035C129.381 84.241 127.227 83.5232 125.792 82.6951C124.909 82.1982 124.301 81.6461 124.08 81.1492C123.86 80.6523 123.749 80.1002 123.749 79.6033V76.7876C123.749 75.6282 124.191 75.0761 125.019 75.0761C125.35 75.0761 125.682 75.1313 126.013 75.2418C126.344 75.3522 126.841 75.573 127.393 75.7939C129.27 76.622 131.313 77.2845 133.466 77.7262C135.675 78.1679 137.828 78.3887 140.036 78.3887C143.514 78.3887 146.22 77.7814 148.097 76.5668C149.974 75.3522 150.968 73.5855 150.968 71.3219C150.968 69.776 150.471 68.5062 149.477 67.4572C148.483 66.4082 146.606 65.4696 143.901 64.5863L135.895 62.1018C131.865 60.832 128.884 58.9549 127.062 56.4704C125.24 54.0412 124.301 51.3359 124.301 48.465C124.301 46.1462 124.798 44.1034 125.792 42.3367C126.786 40.57 128.111 39.0241 129.767 37.8095C131.423 36.5397 133.301 35.6011 135.509 34.9386C137.717 34.276 140.036 34 142.465 34C143.68 34 144.95 34.0552 146.164 34.2208C147.434 34.3865 148.594 34.6073 149.753 34.8281C150.857 35.1042 151.906 35.3802 152.9 35.7115C153.894 36.0428 154.667 36.374 155.219 36.7053C155.992 37.147 156.544 37.5886 156.875 38.0855C157.206 38.5272 157.372 39.1345 157.372 39.9075V42.5023C157.372 43.6617 156.93 44.269 156.102 44.269C155.661 44.269 154.943 44.0482 154.004 43.6065C150.857 42.1711 147.324 41.4533 143.404 41.4533C140.257 41.4533 137.773 41.9502 136.061 42.9992C134.35 44.0482 133.466 45.6493 133.466 47.9129C133.466 49.4588 134.018 50.7838 135.122 51.8328C136.227 52.8818 138.269 53.9308 141.196 54.8693L149.035 57.3538C153.01 58.6236 155.881 60.3903 157.593 62.6539C159.304 64.9175 160.133 67.5124 160.133 70.3833C160.133 72.7573 159.636 74.9105 158.697 76.7876C157.703 78.6648 156.378 80.3211 154.667 81.6461C152.955 83.0263 150.912 84.0201 148.538 84.7379C146.054 85.5108 143.459 85.8973 140.643 85.8973Z"
/>
<path
fill="currentColor"
d="M144.3 214.1c0 6.3.7 11.4 1.9 15.2 1.4 3.7 3.1 7.8 5.4 12.3.9 1.4 1.2 2.7 1.2 3.9 0 1.7-1 3.4-3.2 5.1l-10.7 7.2c-1.5 1-3.1 1.5-4.4 1.5-1.7 0-3.4-.9-5.1-2.4-2.4-2.6-4.4-5.3-6.1-8-1.7-2.9-3.4-6.1-5.3-10-13.3 15.7-30 23.5-50.1 23.5-14.3 0-25.7-4.1-34.1-12.3-8.3-8.2-12.6-19.1-12.6-32.7 0-14.5 5.1-26.2 15.5-35.1S60.8 169 78.4 169c5.8 0 11.7.5 18.1 1.4s12.8 2.2 19.6 3.7v-12.4c0-12.9-2.7-22-8-27.2-5.4-5.3-14.6-7.8-27.8-7.8-6 0-12.1.7-18.4 2.2s-12.4 3.4-18.4 5.8c-2.7 1.2-4.8 1.9-6 2.2s-2 .5-2.7.5c-2.4 0-3.6-1.7-3.6-5.3v-8.3c0-2.7.3-4.8 1.2-6s2.4-2.4 4.8-3.6c6-3.1 13.1-5.6 21.5-7.7 8.3-2.2 17.2-3.2 26.6-3.2 20.3 0 35.1 4.6 44.6 13.8 9.4 9.2 14.1 23.2 14.1 41.9v55.2h.3zM75.2 240c5.6 0 11.4-1 17.5-3.1 6.1-2 11.6-5.8 16.2-10.9 2.7-3.2 4.8-6.8 5.8-10.9s1.7-9 1.7-14.8v-7.2c-4.9-1.2-10.2-2.2-15.7-2.9-5.4-.7-10.7-1-16-1-11.4 0-19.8 2.2-25.4 6.8S51 207.1 51 215.6c0 8 2 14 6.3 18.1 4.1 4.2 10 6.3 17.9 6.3m136.7 18.4c-3.1 0-5.1-.5-6.5-1.7-1.4-1-2.6-3.4-3.6-6.6l-40-131.6c-1-3.4-1.5-5.6-1.5-6.8 0-2.7 1.4-4.3 4.1-4.3h16.7c3.2 0 5.4.5 6.6 1.7 1.4 1 2.4 3.4 3.4 6.6l28.6 112.7 26.6-112.7c.9-3.4 1.9-5.6 3.2-6.6 1.4-1 3.7-1.7 6.8-1.7H270c3.2 0 5.4.5 6.8 1.7 1.4 1 2.6 3.4 3.2 6.6l26.9 114.1 29.5-114.1c1-3.4 2.2-5.6 3.4-6.6 1.4-1 3.6-1.7 6.6-1.7h15.8c2.7 0 4.3 1.4 4.3 4.3 0 .9-.2 1.7-.3 2.7-.2 1-.5 2.4-1.2 4.3l-41 131.6q-1.5 5.1-3.6 6.6c-1.4 1-3.6 1.7-6.5 1.7h-14.6c-3.2 0-5.4-.5-6.8-1.7s-2.6-3.4-3.2-6.8l-26.4-109.8L236.7 250c-.9 3.4-1.9 5.6-3.2 6.8-1.4 1.2-3.7 1.7-6.8 1.7h-14.8zm218.8 4.6c-8.9 0-17.7-1-26.2-3.1-8.5-2-15.2-4.3-19.6-6.8-2.7-1.5-4.6-3.2-5.3-4.8s-1-3.2-1-4.8v-8.7c0-3.6 1.4-5.3 3.9-5.3 1 0 2 .2 3.1.5 1 .3 2.6 1 4.3 1.7 5.8 2.6 12.1 4.6 18.7 6 6.8 1.4 13.5 2 20.3 2 10.7 0 19.1-1.9 24.9-5.6s8.9-9.2 8.9-16.2c0-4.8-1.5-8.7-4.6-11.9s-8.9-6.1-17.2-8.9l-24.7-7.7c-12.4-3.9-21.6-9.7-27.2-17.4-5.6-7.5-8.5-15.8-8.5-24.7 0-7.2 1.5-13.5 4.6-18.9s7.2-10.2 12.3-14c5.1-3.9 10.9-6.8 17.7-8.9 6.8-2 14-2.9 21.5-2.9 3.7 0 7.7.2 11.4.7 3.9.5 7.5 1.2 11.1 1.9 3.4.9 6.6 1.7 9.7 2.7s5.4 2 7.2 3.1c2.4 1.4 4.1 2.7 5.1 4.3 1 1.4 1.5 3.2 1.5 5.6v8c0 3.6-1.4 5.4-3.9 5.4-1.4 0-3.6-.7-6.5-2q-14.55-6.6-32.7-6.6c-9.7 0-17.4 1.5-22.6 4.8s-8 8.2-8 15.2c0 4.8 1.7 8.9 5.1 12.1s9.7 6.5 18.7 9.4l24.2 7.7c12.3 3.9 21.1 9.4 26.4 16.3s7.8 15 7.8 23.8c0 7.3-1.5 14-4.4 19.8-3.1 5.8-7.2 10.9-12.4 15-5.3 4.3-11.6 7.3-18.9 9.5-8 2.5-16 3.7-24.7 3.7"
/><path
fill="#FF9900"
fill-rule="evenodd"
clip-rule="evenodd"
d="M151.078 112.729C132.914 126.145 106.524 133.267 83.8324 133.267C52.0316 133.267 23.3777 121.508 1.7354 101.963C0.0238993 100.417 1.56977 98.3195 3.61254 99.5341C27.0215 113.116 55.8963 121.342 85.7648 121.342C105.916 121.342 128.056 117.146 148.428 108.533C151.465 107.153 154.059 110.521 151.078 112.729Z"
/>
<path
d="M462.9 345.7c-56 41.4-137.4 63.3-207.4 63.3-98.1 0-186.5-36.3-253.2-96.6-5.3-4.8-.5-11.2 5.8-7.5 72.2 41.9 161.3 67.3 253.4 67.3 62.2 0 130.4-12.9 193.3-39.5 9.3-4.2 17.3 6.2 8.1 13"
/><path
fill="#FF9900"
fill-rule="evenodd"
clip-rule="evenodd"
d="M158.642 104.117C156.323 101.135 143.294 102.681 137.386 103.399C135.62 103.62 135.343 102.074 136.945 100.914C147.324 93.6267 164.384 95.7246 166.371 98.1539C168.359 100.638 165.819 117.698 156.102 125.869C154.612 127.139 153.176 126.477 153.839 124.82C156.047 119.354 160.961 107.043 158.642 104.117Z"
d="M486.2 319.2c-7.2-9.2-47.3-4.4-65.6-2.2-5.4.7-6.3-4.1-1.4-7.7 32-22.5 84.6-16 90.8-8.5 6.1 7.7-1.7 60.3-31.7 85.5-4.6 3.9-9 1.9-7-3.2 6.9-16.9 22.1-54.9 14.9-63.9"
/>
</svg>
@@ -1,22 +1,86 @@
<script lang="ts">
import { twMerge } from 'tailwind-merge'
interface Props {
size?: number
color?: string | undefined
class?: string
}
let { size = 16, color = undefined, class: clazz = '' }: Props = $props()
let { size = 16, class: clazz = '' }: Props = $props()
</script>
<!-- Microsoft's own logo_azure.svg (learn.microsoft.com/media/logos/logo_azure.svg): #0078d4 with
the #114a8b->#0669bc and #3ccbf4->#2892df gradients. Shipped unmodified apart from namespacing
the gradient ids, which are document-global. Microsoft's icon terms say to use the icons "as they
would appear within Azure" and forbid changing them, so it must not be recoloured or drawn
monochrome; their permitted use is diagrams, training and documentation
(learn.microsoft.com/azure/architecture/icons). -->
<svg
xmlns="http://www.w3.org/2000/svg"
width={`${size}px`}
height={`${size}px`}
viewBox="0 0 24 24"
fill={color ?? 'currentColor'}
class={clazz}
viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Azure"
class={twMerge(clazz)}
>
<path
d="M22.379 23.343a1.62 1.62 0 0 0 1.536-1.1l.029-.092q.053-.164.081-.336v-.016a1.68 1.68 0 0 0-.268-1.227L15.147 5.44a1.63 1.63 0 0 0-1.354-.724l-3.473.011L5.94 8.57a6 6 0 0 0-1.386 1.74L.262 17.717a1.63 1.63 0 0 0 1.422 2.429l-.055-.013zM13.398 7.25l5.322 9.183-10.683.024zm-3.363 12.754-8.316.021 8.318-14.4 1.795 3.1-6.516 11.274z"
/>
<defs>
<linearGradient
id="azure-grad-2"
x1="-960.6062"
y1="283.3968"
x2="-1032.5112"
y2="70.9723"
gradientTransform="matrix(1, 0, 0, -1, 1075, 318)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#114a8b" />
<stop offset="1" stop-color="#0669bc" />
</linearGradient>
<linearGradient
id="azure-grad-3"
x1="-938.1444"
y1="184.4016"
x2="-954.7776"
y2="178.7775"
gradientTransform="matrix(1, 0, 0, -1, 1075, 318)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-opacity="0.3" />
<stop offset="0.0712" stop-opacity="0.2" />
<stop offset="0.321" stop-opacity="0.1" />
<stop offset="0.6231" stop-opacity="0.05" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="azure-grad-1"
x1="-947.2919"
y1="289.5941"
x2="-868.3628"
y2="79.3082"
gradientTransform="matrix(1, 0, 0, -1, 1075, 318)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#3ccbf4" />
<stop offset="1" stop-color="#2892df" />
</linearGradient>
</defs>
<g>
<path
d="M89.1583,18.266h69.238L86.5228,231.2237a11.0411,11.0411,0,0,1-10.4612,7.51H22.1787a11.0229,11.0229,0,0,1-10.4446-14.5479l66.9633-198.41A11.0406,11.0406,0,0,1,89.1583,18.266Z"
fill="url(#azure-grad-2)"
/>
<path
d="M189.7708,161.1044H79.9752a5.0829,5.0829,0,0,0-3.4681,8.7988l70.5517,65.8479a11.0915,11.0915,0,0,0,7.5668,2.9829h62.1675Z"
fill="#0078d4"
/>
<path
d="M89.1583,18.266A10.95,10.95,0,0,0,78.675,25.92L11.8168,224.0061A11.0094,11.0094,0,0,0,22.21,238.734H77.4839a11.8143,11.8143,0,0,0,9.0688-7.7138L99.8838,191.73l47.6243,44.4181a11.2671,11.2671,0,0,0,7.0889,2.5863h61.9371l-27.1656-77.63-79.1905.0176,48.47-142.856Z"
fill="url(#azure-grad-3)"
/>
<path
d="M177.592,25.7643a11.0227,11.0227,0,0,0-10.4439-7.4983H89.9841a11.0245,11.0245,0,0,1,10.445,7.4983l66.967,198.4209a11.0245,11.0245,0,0,1-10.445,14.5488h77.164a11.0235,11.0235,0,0,0,10.444-14.5488Z"
fill="url(#azure-grad-1)"
/>
</g>
</svg>
@@ -0,0 +1,578 @@
# Icon brand colours
Where every icon's colours come from, and whether they survive both app surfaces.
Compiled from the components themselves during the audit — colours read from the fills and
the Tailwind pair classes, sources from each component's provenance comment, contrast
computed from those hexes against `surface-primary` in each theme. Maintained by hand from
here on: change an icon's colour or source and change its row.
Surfaces: light `#fbfbfd`, dark `#2e3441`. Ratios are WCAG non-text contrast; **bold** marks a
mark that is effectively invisible on that surface. WCAG exempts logotypes from the 3:1
floor, so a low ratio is a signal the colour may be wrong, not automatically a defect.
`pair` = brand publishes a per-theme variant. Usually applied as `text-[#light] dark:text-[#dark]`; `AnsibleIcon` inverts instead (`dark:invert`), and `DatadogIcon`, `DenoIcon`, `DeepLIcon` and `TogglIcon` swap between two SVGs (`dark:hidden` / `hidden dark:block`) because their two marks are different artwork, not the same shape recoloured.
`fixed` = full-colour mark, same in both themes. `inherits` = brand publishes no colour,
so the mark takes the surrounding text colour. `mixed` = the root carries a
`fill="currentColor"` that hardcoded path fills override, so it is inert — these are
candidates for cleanup, not theme-aware icons.
The Light/Dark columns show the colour that carries the mark; white and black knockout
details are omitted. Ratios are the best contrast any part of the mark achieves.
**Do not change a colour here without a first-party source.** Several of these look like
mistakes and are not: Cal.com is deliberately greyscale, Google Cloud may not be recoloured,
Stripe is blurple rather than black. Third-party icon sets go stale and have been wrong
repeatedly — check the brand's own page.
| Icon | Resource types | Mode | Light | Dark | ☀ | 🌙 | Source |
|---|---|---|---|---|---|---|---|
| `AblyIcon` | `ably` | fixed | #FF5416 | #FF5416 | 3.87 | 3.88 | brand.ably.com/logo |
| `AbstractApiIcon` | `abstractapi` | fixed | #20E492 | #20E492 | **1.62** | 12.47 | abstractapi.com's own logo SVG (6538df34291c9fa4ed28d6f7_Logo.svg) |
| `AcceloIcon` | `accelo` | fixed | #4C49CB | #4C49CB | 6.51 | 8.15 | Accelo_Logo-Primary.svg on accelo.com |
| `ActiveCampaignIcon` | `activecampaign` | pair | #004CFF | #FFFFFF | 5.84 | 12.47 | activecampaign.com/brand logo pack (ActiveCampaign-Glyph-Blue.svg / ActiveCampaign-Glyph-White.svg) |
| `ActivitypubIcon` | `activitypub` | fixed | #F1007E | #F1007E | 5.01 | 2.99 | activitypub.rocks/static/images/ActivityPub-logo.svg |
| `AcumbamailIcon` | `acumbamail` | fixed | #E62F71 | #E62F71 | 8.83 | 8.86 | Acumbamail's own isotype SVG, /static/favico/Acumbamail/favicon-32.svg on acumbamail.com |
| `AdhookIcon` | `adhook` | fixed | #00ACC6 | #00ACC6 | 2.63 | 4.58 | adhook's own logo (https://adhook.io/fr/images/logo.svg, `.cls-1{fill:#00acc6}`) |
| `AdobeAcrobatSignIcon` | `adobe_acrobat_sign` | fixed | #584CCC | #584CCC | 6.12 | 12.47 | Adobe's own Acrobat Sign product icon (adobe.com/cc-shared/assets/img/product-icons/svg/acrobat-sign.svg); same value in the live app favicon |
| `Ai21Icon` | `ai21` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | ai21.com (ai21-logo-black.svg / ai21-logo-white.svg) |
| `AirtableIcon` | `airtable` | mixed | #FCB400 | #FCB400 | 3.88 | 6.93 | airtable.com/favicon.ico (fixed full-colour mark: #18BFFF and #F82B60 panels) |
| `AlgoliaIcon` | `algolia` | pair | #003DFF | #FFFFFF | 6.53 | 12.47 | algolia.com logo pack (Algolia-mark-blue.svg / Algolia-mark-white.svg) |
| `AmqpIcon` | `amqp` | fixed | — | — | — | — | — |
| `AnsibleIcon` | `ansible` | pair | #1A1918 | #E5E6E7 | 16.99 | 9.98 | ansible/logos community-marks (Black and White variants, CC BY-SA 4.0) |
| `AnthropicIcon` | `anthropic` | pair | #141413 | #FAF9F5 | 17.84 | 11.84 | anthropics/skills |
| `ApifyIcon` | `apify` | fixed | #246DFF | #246DFF | 4.32 | 12.47 | apify.com/resources/brand |
| `ApolloIcon` | `apollo` | pair | #1F1F1E | #F8FF2C | 15.96 | 11.48 | apollo.io |
| `AppwriteIcon` | `appwrite` | mixed | #FD366E | #FD366E | 3.88 | 5.71 | https://appwrite.io/assets |
| `ArcGisIcon` | `arcgis_account` | fixed | #006FDE | #006FDE | 4.69 | 2.57 | Esri's ArcGIS Pro product logo (esri.com/content/dam/esrisites/en-us/common/icons/product-logos/arcgis-pro-64.svg) |
| `AsanaIcon` | `asana` | fixed | #FF584A | #FF584A | 3.01 | 4.01 | asana.com/brand |
| `AssemblyAiIcon` | `assemblyai` | pair | #1D1B16 | #C7C3B2 | 16.65 | 12.47 | assemblyai.com (assemblyai-logo-full-primary.svg / assemblyai-logo-full-secondary.svg) |
| `AttioIcon` | `attio` | pair | #1C1D1F | #FFFFFF | 16.32 | 12.47 | the attio.com header logo (--color-black-100 / --color-white-100) |
| `Auth0Icon` | `auth0` | pair | #232220 | #FFFFFF | 15.38 | 12.47 | auth0.com docs logo light.svg / dark.svg |
| `AutheliaIcon` | `authelia` | fixed | #3F51B4 | #3F51B4 | 6.67 | 1.81 | authelia.com/images/branding/logo-cropped.svg (light stop of the official #3F51B4#113155 gradient, flattened) |
| `AuthentikIcon` | `authentik` | pair | #FD4B2D | #FFFFFF | 3.27 | 12.47 | goauthentik.io/press |
| `AwsEcrIcon` | `aws_ecr` | fixed | #ED7100 | #ED7100 | 2.92 | 12.47 | the AWS Architecture Icons package (Icon-package_07312026, Arch_Containers/Arch_Amazon-Elastic-Container-Registry) |
| `AwsIcon` | `aws`, `redshift` | pair | #252F3E | #FF9900 | 13.07 | 5.83 | AWS's own logo files (d0.awsstatic.com/logos/powered-by-aws{,-white}.png) |
| `AzureIcon` | `azure` | fixed | — | — | — | — | Microsoft's own logo_azure.svg (learn.microsoft.com/media/logos/logo_azure.svg), whose outer wedges add the #114A8B->#0669BC and #3CCBF4->#2892DF gradients |
| `BambooHrIcon` | `bamboo_hr` | pair | #599D15 | #FFFFFF | 3.25 | 12.47 | bamboohr.com (Encore --brandColor; bamboohr-logo-white.png is the published reversed variant) |
| `BaremetricsIcon` | `baremetrics` | fixed | #5386FF | #5386FF | 3.27 | 3.70 | the mark in baremetrics.com's header logo (baremetrics-logo.svg), the asset this path is taken from |
| `BaserowIcon` | `baserow`, `baserow_table` | fixed | #2BC3F1 | #2BC3F1 | 4.96 | 6.05 | the baserow.io favicon and horizontal logo |
| `BasisTheoryIcon` | `basis_theory` | pair | #1D2032 | #EBEDFF | 15.57 | 10.74 | developers.basistheory.com/img/bt-logo-light.svg and bt-logo-dark.svg, which ship the same mark geometry in the two theme colours |
| `BeamerIcon` | `beamer` | pair | #1C1E21 | #FFFFFF | 16.16 | 12.47 | the getbeamer.com header logo (g#isotype) and their webclip app icon, which sets the same mark in white on #1C1E21 |
| `BigQueryIcon` | `bigquery` | fixed | #34A853 | #34A853 | 3.80 | 7.30 | Google Cloud's official icon library (cloud.google.com/icons, core-products-icons.zip) |
| `BitbucketIcon` | `bitbucket` | pair | #1868DB | #FFFFFF | 5.03 | 12.47 | atlassian.design/foundations/logos (Bitbucket mark, brand and inverse) |
| `BitlyIcon` | `bitly` | fixed | #F36600 | #F36600 | 3.03 | 3.99 | bitly.com/pages/bitly-logo-usage-guidelines-for-media (Bitly-MediaKit glyph_bitly_orange_RGB.svg) |
| `BloggerIcon` | `blogger` | fixed | #F57C00 | #F57C00 | 2.62 | 12.47 | Google's Blogger product logo (gstatic.com/images/branding/productlogos/blogger/v5/192px.svg) |
| `BlueskyIcon` | `bluesky` | pair | #0560FF | #FFFFFF | 4.93 | 12.47 | bsky.social/about/support/branding |
| `BotifyIcon` | `botify` | fixed | #A973FF | #A973FF | 3.09 | 3.91 | botify.com design tokens (--color--surface--purple-05) |
| `BoxIcon` | `box` | pair | #0061D5 | #FFFFFF | 5.54 | 12.47 | box.com (.box-logo-svg fill:#0061d5, reversed to #fff over the dark masthead) |
| `BrevoIcon` | `brevo`, `sendinblue` | fixed | #0B996E | #0B996E | 3.51 | 12.47 | brevo.com's favicon.svg |
| `BrexIcon` | `brex` | pair | #15191E | #FFFFFF | 17.08 | 12.47 | brex.com |
| `BrowserlessIcon` | `browserless` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | browserless.io/favicon.svg |
| `BubbleIcon` | `bubble` | mixed | #0000FF | #0000FF | 8.31 | 5.71 | the logo SVG served on bubble.io/brand; the B is #262626 there, kept as currentColor so the monochrome part follows the app theme |
| `BuildkiteIcon` | `buildkite` | fixed | #30F2A2 | #30F2A2 | 2.04 | 8.52 | buildkite.com/about/brand-assets |
| `BunIcon` | — | fixed | #FBF0DF | #FBF0DF | 6.48 | 12.47 | https://bun.com/logo.svg |
| `ButtondownIcon` | `buttondown` | fixed | #0069FF | #0069FF | 4.55 | 2.65 | https://buttondown.com/brand |
| `CSharpIcon` | — | fixed | #927BE5 | #927BE5 | 7.68 | 12.47 | dotnet/brand logo/language-icons/csharp-72.svg (CC0) |
| `CalcomIcon` | `calcom` | pair | #292929 | #FAFAFA | 14.08 | 11.95 | design.cal.com |
| `CalendlyIcon` | `calendly` | pair | #006BFF | #FFFFFF | 4.47 | 12.47 | Calendly's 2024 External Brand Guidelines and calendly_brand mark_white.svg (media kit on calendly.com/newsroom) |
| `CampaynIcon` | `campayn` | fixed | #008AFF | #008AFF | 3.34 | 12.47 | app.campayn.com/images/campayn/favicons/safari-pinned-tab.svg (colours sampled from android-chrome-512x512.png in the same directory) |
| `CertopusIcon` | `certopus` | fixed | #FF6E30 | #FF6E30 | 12.07 | 12.47 | https://certopus.com/images/logo/logo_circle.svg |
| `ChromaIcon` | `chromadb` | fixed | #FFDE2D | #FFDE2D | 3.65 | 9.35 | Chroma's own logo SVG served by trychroma.com (chroma-wordmark.svg) |
| `CircleCiIcon` | `circleci` | pair | #161616 | #FFFFFF | 17.51 | 12.47 | brand.circleci.com |
| `CiscoIcon` | `cisco` | pair | #00BCEB | #FFFFFF | 2.16 | 12.47 | cisco.com logo SVG and newsroom.cisco.com/logos |
| `ClaudeIcon` | — | fixed | #D97757 | #D97757 | 3.02 | 12.47 | https://claude.ai/favicon.svg (Anthropic's own asset) |
| `ClearbitIcon` | `clearbit` | fixed | #4DB1FD | #4DB1FD | 20.32 | 10.83 | clearbit.com/logo.svg |
| `ClerkIcon` | `clerk` | fixed | #BAB1FF | #BAB1FF | 5.10 | 6.43 | clerk.com/brand-assets (symbol-primary.svg) |
| `ClickhouseIcon` | `clickhouse` | pair | #161616 | #FFFFFF | 17.51 | 12.47 | clickhouse.design/brand/logo-usage (logomark, on-light / on-dark) |
| `ClickupIcon` | `clickup` | fixed | #6647F0 | #6647F0 | 5.46 | 4.12 | clickup.com/brand (v4 Logomark-gradient.svg); the gradient mark is the same on light and dark, and the guidelines say "don't change the color" |
| `CloseIcon` | `close` | fixed | #4EC375 | #4EC375 | 4.77 | 7.39 | close.com/brand (close-logo-2024 mark.svg) |
| `CloudflareIcon` | `cloudflare` | fixed | #FF5F08 | #FF5F08 | 2.95 | 5.83 | the logomark shipped on cloudflare.com, blog.cloudflare.com and workers.cloudflare.com |
| `CloudinaryIcon` | `cloudinary` | pair | #3448C5 | #FFFFFF | 7.06 | 12.47 | cloudinary_logo_for_white_bg.svg and cloudinary_logo_for_black_bg.svg on cloudinary-res.cloudinary.com |
| `CockroachDbIcon` | `cockroachdb` | pair | #6933FF | #FFFFFF | 5.78 | 12.47 | cockroachlabs.com (electric-purple-500, also the CockroachDB docs primaryColor) and the docs light/dark logo pair |
| `CodaIcon` | `coda` | fixed | #F46A54 | #F46A54 | 2.89 | 4.18 | Coda's own app icon, https://cdn.coda.io/icons/png/color/coda-192.png (single-colour mark, no dark variant published) |
| `CodatIcon` | `codat` | fixed | #D1E100 | #D1E100 | 17.31 | 8.60 | codat.io (logo-white.svg glyph outlines, colours from the site palette); framing matches their 300x300 favicon exactly |
| `CohereIcon` | `cohere` | fixed | #355146 | #355146 | 8.41 | 12.47 | https://cohere.com/logo.svg |
| `CoinMarketCapIcon` | `coinmarketcap` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | coinmarketcap.com |
| `CoinbaseIcon` | `coinbase` | pair | #0052FF | — | 5.57 | — | Coinbase's own light/dark logo files (mintcdn.com/coinbase-prod/.../logos/wordmark-light.svg and wordmark-dark.svg, served by docs.cdp.coinbase.com) |
| `ComapeoIcon` | `comapeo_server` | pair | #022199 | #0066FF | 12.09 | 2.58 | the CoMapeo Cloud mark shipped as public/favicon.svg in digidem/comapeo-cloud-app (the server this resource connects to) |
| `ConfluenceIcon` | `confluence` | fixed | #1868DB | #1868DB | 5.03 | 12.47 | Atlassian's @atlaskit/logo (atlassian.design logo library) |
| `ContentfulIcon` | `contentful` | fixed | #1773EB | #1773EB | 4.33 | 9.08 | Contentful's Forma 36 design system (ContentfulLogoIcon) |
| `ContiguityIcon` | `contiguity` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | contiguity.com/assets/icon-white.png and icon-black.png (docs.contiguity.com likewise ships logo/black.svg for light and logo/white.svg for dark) |
| `ConvertKitIcon` | `convertkit` | pair | #1E1E1E | #F2EFE9 | 16.13 | 10.87 | kit.com/brand |
| `CoupaIcon` | `coupa` | pair | #1565C0 | #FFFFFF | 5.56 | 12.47 | the Coupa logo kit linked from coupa.com/company/press-kit, which ships the mark in blue and a white reversed variant |
| `CssIcon` | — | fixed | #663399 | #663399 | 8.13 | 12.47 | github.com/CSS-Next/logo.css (CC0), the official CSS logo endorsed by the W3C CSS WG |
| `CurrencyApiIcon` | `currencyapi` | fixed | #2994FF | #2994FF | 9.13 | 4.67 | currencyapi.com/img/currencyapi_logo_color.svg |
| `DatabricksIcon` | `databricks` | fixed | #FF3621 | #FF3621 | 3.50 | 3.45 | Databricks' own logo asset (databricks.com/sites/default/files/2023-08/databricks-default.png) |
| `DatadogIcon` | `datadog` | pair | #632CA6 | #FFFFFF | 8.32 | 12.47 | datadoghq.com press kit |
| `DatoCmsIcon` | `datocms` | fixed | #FF7751 | #FF7751 | 2.54 | 4.76 | datocms.com/company/brand-assets |
| `DbtIcon` | `dbt_profile` | fixed | #FE6703 | #FE6703 | 2.84 | 4.25 | the dbt Labs brand assets (getdbt.com/brand-guidelines) |
| `DeelIcon` | `deel` | pair | #1B1B1B | #FFFFFF | 16.67 | 12.47 | deel.com's own logo_revamp.svg / logo_revamp_white.svg |
| `DeepInfraIcon` | `deep_infra` | pair | #2A3275 | #4C9CEC | 11.22 | 12.47 | the DeepInfra press-kit logo pack (deepinfra.com/media-center → DEEPINFRA_LOGO_COLOR / DEEPINFRA_LOGO_WHITE) |
| `DeepLIcon` | `deepl` | pair | #0F2B46 | #FFFFFF | 13.97 | 12.47 | DeepL's official logo pack on deepl.com/en/press ("Logo Deep Blue" RGB #0F2B46 and the published "Logo White" reversed variant) |
| `DeepSeekIcon` | `deepseek` | pair | #4D6BFE | #6799FE | 4.19 | 4.49 | deepseek.com design tokens (--ds-color-brand under :root / [data-theme=dark]) |
| `DenoIcon` | — | pair | #000000 | #FFFFFF | 20.32 | 12.47 | the "Deno Logo Guidelines 2024" asset pack on deno.com/brand |
| `DigitalOceanIcon` | `digitalocean` | fixed | #0080FF | #0080FF | 3.67 | 3.29 | DigitalOcean's official logo kit (DO_Logo_icon_blue.svg, linked from digitalocean.com/press) |
| `DiscordIcon` | `discord`, `discord_webhook` | mixed | #5865F2 | #5865F2 | 4.46 | 5.71 | https://discord.com/branding |
| `DiscourseIcon` | `discourse` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | discourse.org/brand (discourse-icon.svg / discourse-icon-dark.svg) |
| `DocSpringIcon` | `docspring` | fixed | #3C8EE0 | #3C8EE0 | 3.31 | 12.47 | DocSpring's own logo SVG, docspring.com/assets/logo-text-*.svg |
| `DockerIcon` | — | fixed | #2560FF | #2560FF | 4.84 | 2.49 | Docker's official logo kit (docker.com/company/newsroom/media-resources) |
| `DocusignIcon` | `docusign` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | brand.docusign.com/logo: only the Nexus overlap flips per background, Cobalt #4C00FF and Poppy #FF5252 must not be recoloured |
| `DropboxIcon` | `dropbox` | fixed | #0061FE | #0061FE | 4.91 | 2.46 | brand.dropbox.com/logo and the DIG token dig-color__primary__base |
| `DuckDbIcon` | `duckdb` | pair | #1A1A1A | #FFF100 | 16.84 | 10.59 | duckdb.org/design logo package (DuckDB_icon-lightmode.svg / DuckDB_icon-darkmode.svg) |
| `DucklakeIcon` | — | pair | #1A1A1A | #2EAFFF | 16.84 | 5.16 | duckdb.org |
| `DustIcon` | `dust` | fixed | #FE9C1A | #FE9C1A | 4.04 | 10.64 | dust.tt/home/brand-resources (Dust_LogoSquare.svg from their brand kit) |
| `DynatraceIcon` | `dynatrace` | fixed | #1496FF | #1496FF | 10.01 | 7.83 | Dynatrace brand guidelines (live.standards.site/dynatrace, Dynatrace_mark_color.svg) |
| `EdgeDbIcon` | `edgedb` | fixed | #8FAF24 | #8FAF24 | 2.44 | 4.94 | geldata.com (favicon/apple-touch-icon glyph and its <link rel="mask-icon" color>) |
| `EnodeIcon` | `enode` | pair | #5D770D | #E8E8E1 | 4.94 | 10.13 | enode.com/static/favicon.svg |
| `EventbriteIcon` | `eventbrite` | fixed | #FF5E30 | #FF5E30 | 2.95 | 4.10 | the 2025 Eventbrite press kit logos; the brand publishes no reversed variant |
| `ExaIcon` | `exa` | pair | #0143D9 | #FFFFFF | 7.24 | 12.47 | exa.ai/brand (Exa Brand Assets kit, Logomark Blue/White) |
| `FaunadbIcon` | `faunadb` | pair | #3F00A5 | #604BE9 | 11.58 | 2.19 | Fauna's own VS Code extension icons (fauna/fauna-vscode: icons/fauna.svg for light themes, icons/fauna-light.svg for dark) |
| `FigmaIcon` | `figma` | fixed | #24CB71 | #24CB71 | 4.42 | 5.85 | static.figma.com/app/icon/2/favicon.svg (2025 brand refresh) |
| `FirebaseIcon` | `firebase` | fixed | #FF9100 | #FF9100 | 4.58 | 7.81 | firebase.google.com/brand-guidelines (Logomark_Full Color.svg in firebase-brand-assets.zip) |
| `FlyIcon` | `fly` | pair | #24175B | #FFFFFF | 15.07 | 12.47 | fly.io |
| `FormstackIcon` | `formstack` | fixed | #21B573 | #21B573 | 2.56 | 4.70 | the brand guide at formstack.com/press-kit |
| `FoxentryIcon` | `foxentry` | fixed | #E74600 | #E74600 | 5.09 | 4.14 | foxentry.com/assets/img/logo-foxentry-symbol.svg |
| `FreshdeskIcon` | `freshdesk` | fixed | #20A849 | #20A849 | 3.01 | 12.47 | Freshworks' own product-logo asset (freshdesk-dew.svg, used on freshworks.com/apps) |
| `FrontAppIcon` | `frontapp` | fixed | #A857F1 | #A857F1 | 3.83 | 3.15 | the logo mark front.com ships inline on its own pages; the mark keeps this purple on both light and dark backgrounds |
| `FunkwhaleIcon` | `funkwhale` | mixed | #009FE3 | #009FE3 | 10.69 | 5.71 | www.funkwhale.audio/logos (theme/images/icon.svg) |
| `GSheetsIcon` | `gsheets` | fixed | #009954 | #009954 | 3.57 | 12.47 | Google product logo sheets_2026q3 (gstatic productlogos, used on workspace.google.com/products/sheets) |
| `GcalIcon` | `gcal` | fixed | #BBE2FF | #BBE2FF | 3.40 | 12.47 | Google's own Calendar 2026 product logo, https://www.gstatic.com/images/branding/productlogos/calendar_2026/v2/web/192px.svg (paths verbatim) |
| `GdocsIcon` | `gdocs` | inherits | #718096 | #A9B0BA | 3.88 | 5.71 | Google's own Docs product icon (gstatic.com/images/branding/productlogos/docs_2026/v2/web/192px.svg, served on workspace.google.com/products/docs) |
| `GdriveIcon` | `gdrive` | fixed | #B43333 | #B43333 | 5.87 | 10.05 | https://www.gstatic.com/images/branding/productlogos/drive_2026/v2/web/192px.svg, Google's own product-logo CDN; paths and gradient stops are verbatim |
| `GhostCmsIcon` | `ghostcms` | pair | #15171A | #FFFFFF | 17.38 | 12.47 | docs.ghost.org |
| `GiphyIcon` | `giphy` | fixed | #FFF35C | #FFF35C | 4.76 | 10.83 | GIPHY's own app icon (giphy.com/static/img/icons/apple-touch-icon-180px.png) |
| `GitBookIcon` | `gitbook` | pair | #181C1F | #F2F7F7 | 16.59 | 11.54 | the GitBook-icon-dark / GitBook-icon-light downloads on gitbook.gitbook.io/brand-assets, matching the live gitbook.com favicon |
| `GitIcon` | `git_repository`, `git` | fixed | #F03C2E | #F03C2E | 3.77 | 3.20 | git-scm.com/community/logos (Git-Icon-1788C.svg, logo by Jason Long, CC BY 3.0) |
| `GithubIcon` | `github` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | brand.github.com/foundations/logo |
| `GitlabIcon` | `gitlab` | mixed | #FC6D26 | #FC6D26 | 4.01 | 6.18 | https://design.gitlab.com/brand-design/color (Orange 03p/02p/01p, "colors from our core logo") |
| `GmailIcon` | `gmail` | mixed | #4285F4 | #4285F4 | 5.61 | 7.30 | gstatic.com/images/branding/product/2x/gmail_2020q4_48dp.png |
| `GoogleAiIcon` | `googleai` | fixed | #217BFE | #217BFE | 3.81 | 5.44 | Google's standard Gemini product icon (gstatic.com/images/branding/productlogos/gemini/v1/192px.svg) |
| `GoogleCalendarIcon` | — | fixed | #BBE2FF | #BBE2FF | 3.40 | 12.47 | the Google Calendar 2026 product icon, taken verbatim from https://www.gstatic.com/images/branding/productlogos/calendar_2026/v2/web/192px.svg |
| `GoogleCloudIcon` | `gcloud`, `gcp_service_account` | fixed | #EA4335 | #EA4335 | 3.80 | 7.30 | Google's own product logo asset https://www.gstatic.com/images/branding/product/2x/google_cloud_64dp.png |
| `GoogleDriveIcon` | — | fixed | #B43333 | #B43333 | 5.87 | 10.05 | https://www.gstatic.com/images/branding/productlogos/drive_2026/v2/web/192px.svg (Drive 2026 mark, copied verbatim) |
| `GoogleFormsIcon` | `gforms` | fixed | #969DFF | #969DFF | 5.99 | 12.47 | Google's own Forms product icon at www.gstatic.com/images/branding/productlogos/forms_2026/v2/web/192px.svg |
| `GoogleIcon` | `google`, `gworkspace` | mixed | #4285F4 | #4285F4 | 3.88 | 7.30 | the G mark Google serves in accounts.google.com/gsi/client |
| `GorgiasIcon` | `gorgias` | pair | #000000 | #FFF9F4 | 20.32 | 11.94 | gorgias.com/about-us/style, which ships the symbol as a "Dark"/"Light" pair |
| `GraphqlIcon` | `graphql` | pair | #E10098 | #FFFFFF | 4.37 | 12.47 | graphql.org |
| `GreipIcon` | `greip` | pair | #141C27 | #FFFFFF | 16.59 | 12.47 | docs.greip.io |
| `GristIcon` | `grist` | fixed | #16B378 | #16B378 | 2.62 | 8.25 | getgrist.com/trademark/assets/ |
| `GroqIcon` | `groqai`, `groq` | fixed | #F43E01 | #F43E01 | 3.67 | 12.47 | https://groq.com/favicon.svg |
| `HackernewsIcon` | `hackernews` | fixed | #FF6600 | #FF6600 | 2.84 | 12.47 | news.ycombinator.com/y18.svg |
| `HoldedIcon` | `holded` | fixed | #FD454D | #FD454D | 3.31 | 3.64 | cdn.holded.com/assets/img/brand/holded-logo.svg |
| `HoneybadgerIcon` | `honeybadger` | fixed | #EA5937 | #EA5937 | 3.40 | 3.55 | honeybadger.io/favicon.svg |
| `HtmlIcon` | — | fixed | #E44D26 | #E44D26 | 3.77 | 12.47 | the W3C HTML5 logo, w3.org/html/logo (downloads/HTML5_Logo.svg) |
| `HubspotIcon` | `hubspot` | pair | #FF2F00 | #FFFFFF | 3.59 | 12.47 | hubspot.com |
| `IfsIcon` | `ifs_cloud_oidc` | fixed | #72C9F8 | #72C9F8 | 6.03 | 6.79 | the IFS symbol on ifs.com |
| `IftttIcon` | `ifttt` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | ifttt.com |
| `InkeepIcon` | `inkeep` | fixed | #D5E5FF | #D5E5FF | 2.45 | 9.79 | Inkeep's brand page "Icon Core" (https://inkeep.com/brand) |
| `IntercomIcon` | `intercom` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | intercom.com |
| `IpinfoIcon` | `ipinfo` | pair | #3091CF | #FFFFFF | 3.34 | 12.47 | ipinfo.io logo-positive.svg and logo-negative.svg |
| `JavaIcon` | — | fixed | #007396 | #007396 | 5.22 | 4.93 | Oracle's Java Branding and Licensing Guidelines v21 (oracle.com/a/ocom/docs/java-licensing-logo-guidelines-1908204.pdf) |
| `JavaScriptIcon` | — | fixed | #F7DF1E | #F7DF1E | 20.32 | 9.22 | js.svg in github.com/voodootikigod/logo.js, the origin of the JavaScript logo |
| `JiraIcon` | `jira` | fixed | #1868DB | #1868DB | 5.03 | 12.47 | Atlassian's official Jira logo pack (atlassian.design/foundations/logos) |
| `JoomlaIcon` | `joomla` | fixed | #7AC143 | #7AC143 | 3.58 | 6.23 | the official logo at cdn.joomla.org/images/joomla-colours-logo.svg |
| `JotformIcon` | `jotform` | pair | #0A1551 | #FFFFFF | 16.40 | 12.47 | jotform.com footer logomark (#jotform-logomark-fourth is filled with --jf-logo-img: #0A1551 light, #fff dark) |
| `JsonIcon` | — | fixed | #F9A825 | #F9A825 | 1.91 | 6.33 | Material Design Yellow 800 (api.flutter.dev Colors.yellow[800]); glyph is Google's Material Symbols "data_object" |
| `JumpCloudIcon` | `jumpcloud` | pair | #002B49 | #F7F7FB | 14.09 | 11.67 | jumpcloud.com/press (Ocean Blue / White Smoke); White Smoke is the brand's own reversed logo for dark backgrounds |
| `KafkaIcon` | `kafka` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | apache/kafka |
| `KanidmIcon` | `kanidm` | fixed | #B1DEF4 | #B1DEF4 | 20.32 | 12.47 | artwork/logo-square.svg in github.com/kanidm/kanidm (full palette: #FF6600 #803300 #D45500 #2A3455 #B1B3B8 #CCCCCC) |
| `KeycloakIcon` | `keycloak` | fixed | #00B8E3 | #00B8E3 | 8.18 | 10.65 | keycloak.org's own mark, https://www.keycloak.org/resources/images/icon.svg (cyan #00B8E3/#33C6E9/#008AAA over greys #4D4D4D#EDEDED, single theme) |
| `KlaviyoIcon` | `klaviyo` | pair | #1D1E20 | #FFFFFF | 16.14 | 12.47 | klaviyo.com --color-core-charcoal; the flag mark is the standalone logomark the site header collapses to, and the shape of klaviyo.com/icons/icon-512x512.png |
| `KoboToolboxIcon` | `kobotoolbox` | fixed | #2095F3 | #2095F3 | 3.05 | 3.95 | the kobotoolbox.org header logo and $kobo-blue in kobotoolbox/kpi jsapp/scss/colors.scss |
| `KustomerIcon` | `kustomer` | fixed | #FBEC2A | #FBEC2A | 14.08 | 12.47 | kustomer.com/images/kustomer/Kusty.svg |
| `LangfuseIcon` | `langfuse` | fixed | #FF5D5F | #FF5D5F | 2.91 | 4.47 | langfuse.com/brand "Icon - Color (SVG)", used unmodified |
| `LessIcon` | — | pair | #274F82 | #FFFFFF | 8.04 | 12.47 | github.com/less/logo (MIT) |
| `LineIcon` | `line` | fixed | #06C755 | #06C755 | 2.18 | 5.53 | LINE's official brand icon asset (line.me/en/logo) |
| `LinearIcon` | `linear` | pair | #222326 | #F4F5F8 | 15.20 | 11.44 | linear.app/brand |
| `LinkdingIcon` | — | pair | #5856E0 | #ADABF7 | 5.32 | 5.91 | sissbruecker/linkding |
| `LinkedinIcon` | `linkedin` | mixed | #0A66C2 | #0A66C2 | 5.50 | 12.47 | the official inbug SVGs embedded in brand.linkedin.com/in-logo |
| `LinodeIcon` | `linode` | fixed | #004B16 | #004B16 | 10.07 | 4.54 | Linode's own packages/manager/src/assets/logo/logo.svg in linode/manager @3e53c92, the last revision before the Akamai rebrand dropped it |
| `LumaAiIcon` | `lumaai` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | lumalabs.ai (favicon-black.ico on light, favicon-white.ico on dark) |
| `MSSqlServerIcon` | — | fixed | #0094F0 | #0094F0 | 10.54 | 12.47 | learn.microsoft.com/en-us/azure/architecture/icons — Microsoft's anchor blue, a stop in its own SQL Server SVG and throughout the set's Fluent gradients |
| `MSTeamsIcon` | — | fixed | #A98AFF | #A98AFF | 12.96 | 12.47 | Microsoft's Teams-Icon-FY26 asset (cdn-dynmedia-1.microsoft.com, served on microsoft.com/microsoft-teams); every gradient stop here is verbatim from it |
| `MagentoIcon` | `magento` | fixed | #F26322 | #F26322 | 3.09 | 3.91 | Magento's own logo asset, magento2 lib/web/images/logo.svg |
| `MailchimpIcon` | `mailchimp` | fixed | #241C15 | #241C15 | 16.23 | 10.74 | mailchimp.com/about/brand-assets |
| `MailerLiteIcon` | `mailerlite` | fixed | #09C269 | #09C269 | 2.27 | 5.31 | mailerlite.com/brand-assets |
| `MailgunIcon` | `mailgun` | fixed | #F04126 | #F04126 | 3.70 | 12.47 | mailgun.com's own logo-mailgun-icon.svg |
| `MandrillIcon` | `mandrill` | pair | #241C15 | #FFFFFF | 16.23 | 12.47 | mailchimp.com/about/brand-assets and Mandrill's own mandrillapp.com/img/navigation/freddie.svg |
| `MapboxIcon` | `mapbox` | pair | #0E1012 | #FFFFFF | 18.45 | 12.47 | mapbox.com |
| `MarkdownIcon` | — | pair | #000000 | #FFFFFF | 20.32 | 12.47 | dcurtis/markdown-mark (public domain) |
| `MastodonIcon` | `mastodon` | mixed | #6364FF | #6364FF | 7.07 | 12.47 | https://joinmastodon.org/branding |
| `MatrixIcon` | `matrix` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | matrix.org/branding |
| `MatteroomIcon` | `matteroom` | fixed | #134A81 | #134A81 | 8.74 | 12.47 | the MATTEROOM logomark vector at login.matteroom.com/images/login_logo.svg; square tile proportions taken from their own app icon at matteroom.com/favicon.ico |
| `MauticIcon` | `mautic` | pair | #4E5E9E | #FFFFFF | 5.94 | 12.47 | mautic.org/about/brand-logos-graphics (Mautic_Logo_LB.svg / Mautic_Logo_DB.svg); the "M" stays Sunglow #FDB933 in both, as the trademark policy requires the mark in its exact published form without alteration in colour |
| `McpIcon` | `mcp` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | modelcontextprotocol/modelcontextprotocol |
| `MediumIcon` | `medium` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | medium.design |
| `MeteosourceIcon` | `meteosource` | fixed | #FAD961 | #FAD961 | 2.87 | 9.01 | the logo in the meteosource.com site header (no brand page published) |
| `MezmoIcon` | `mezmo` | pair | #0A090C | #E6E6E5 | 19.22 | 9.99 | mezmo.com nav mark and docs.mezmo.com logo/light.png + logo/dark.png |
| `MicrosoftIcon` | `microsoft` | mixed | #F25022 | #F25022 | 3.88 | 7.24 | the official logo asset linked from Microsoft's logo third-party usage guidance |
| `MiroIcon` | `miro` | fixed | #FFDD33 | #FFDD33 | 16.46 | 9.29 | the Miro logo on miro.com |
| `MistralIcon` | `mistral` | inherits | #718096 | #A9B0BA | 3.88 | 5.71 | mistral.ai/favicon.svg (mid-band of the #FFAF01 -> #C4001D ramp); drawn here in currentColor, the monochrome variant mistral.ai/brand ships |
| `MixpanelIcon` | `mixpanel` | pair | #7856FF | #FFFFFF | 4.44 | 12.47 | brand.mixpanel.com/logo and /color (Purple 100); mixpanel.com ships the same pair as its light/dark favicons |
| `MollieIcon` | `mollie` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | Mollie's app icon (my.mollie.com/assets/images/favicons/apple-touch-icon-180x180.png): a full-bleed disc with the lowercase m knocked out |
| `MondayIcon` | `monday` | fixed | #FB275D | #FB275D | 3.66 | 8.25 | monday.com's official logo pack (brand-monday.com/logo) |
| `MongodbIcon` | `mongodb` | pair | #00684A | #00ED64 | 6.60 | 7.90 | MongoDB brand resources and their LeafyGreen palette |
| `MotimateIcon` | `motimate` | fixed | #2DC89C | #2DC89C | 2.06 | 5.85 | motimateapp.com theme assets |
| `MqttIcon` | `mqtt` | pair | #660066 | #FFFFFF | 11.57 | 12.47 | mqtt/mqttorg-graphics |
| `Mysql` | `mysql` | inherits | #718096 | #A9B0BA | 3.88 | 5.71 | — |
| `NatsIcon` | `nats` | pair | #375C93 | #27AAE1 | 6.52 | 4.71 | cncf/artwork |
| `NeonDbIcon` | `neondb` | pair | #37C38F | #34D59A | 2.17 | 6.61 | neon.com/brand (neon-logomark-light-color.svg / neon-logomark-dark-color.svg) |
| `NetBoxIcon` | `netbox` | pair | #001423 | #FFFFFF | 18.07 | 12.47 | theme, so the second path carries its own fill- utilities |
| `NetlifyIcon` | `netlify` | pair | #05BDBA | #32E6E2 | 10.06 | 12.47 | netlify.com/brand (netlify-logo-monogram.zip, full-colour lightmode/darkmode) |
| `NetsuiteIcon` | `netsuite` | fixed | #BACCDB | #BACCDB | 7.71 | 7.57 | — |
| `NewsApiIcon` | `newsapi` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | newsapi.org |
| `NextcloudIcon` | `ocs`, `nextcloud` | pair | #0082C9 | #FFFFFF | 4.03 | 12.47 | nextcloud.com |
| `NocoDbIcon` | `nocodb` | fixed | #4351E8 | #4351E8 | 11.12 | 3.30 | nocodb.com's own Logo.svg / favicon |
| `NotionIcon` | `notion` | fixed | #FFFFFF | #FFFFFF | 20.32 | 12.47 | Notion's own app icon (notion.com/front-static/logo-ios.png) |
| `NuIcon` | — | fixed | #4D9B05 | #4D9B05 | 3.38 | 3.57 | nushell/vscode-nushell-lang assets/nu.svg |
| `OdkIcon` | `odk` | fixed | #3E77B4 | #3E77B4 | 6.37 | 2.67 | ODK brand assets (getodk.org/legal/brand/) |
| `OktaIcon` | `okta` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | okta.com |
| `OneSignalIcon` | `onesignal` | pair | #051B2C | #FFFFFF | 16.94 | 12.47 | OneSignal's official media kit (OneSignal-Logomark.svg / OneSignal-Logomark-White.svg), matching the prefers-color-scheme pair in their own onesignal.com/favicon.svg |
| `OpenRouterIcon` | `openrouter` | pair | #7624F4 | #C8FF00 | 6.10 | 10.55 | openrouter.ai/brand/v2/openrouter-glyph-{light,dark}.svg |
| `OpenWeatherIcon` | `openweather` | pair | #EA6D4A | — | 2.99 | — | openweather.co.uk/brand_guidelines |
| `OpenaiIcon` | `openai` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | openai.com/brand (Blossom_Light.svg / Blossom_Dark.svg) |
| `OracleDBIcon` | `oracledb` | fixed | #C74634 | #C74634 | 4.67 | 2.59 | Oracle's own logo SVG at https://www.oracle.com/a/ocom/img/oracle-logo.svg |
| `OutreachIcon` | `outreach` | pair | #5951FF | #FFFFFF | 5.02 | 12.47 | outreach.ai |
| `PHPIcon` | — | fixed | #AEB2D5 | #AEB2D5 | 20.32 | 12.47 | php.net/images/logos/new-php-logo.svg (php.net/download-logos.php) |
| `PagerDutyIcon` | `pagerduty` | pair | #048A24 | #FFFFFF | 4.35 | 12.47 | pagerduty.com/brand "P icon" pack (P-GreenRGB.svg / P-WhiteRGB.svg) |
| `PandaDocIcon` | `pandadoc` | fixed | #248567 | #248567 | 4.39 | 12.47 | the PandaDoc logo shipped on pandadoc.com (header logo SVG and favicon); white monogram on the green tile in both themes |
| `PaychexIcon` | `paychex` | fixed | #004B8D | #004B8D | 8.50 | **1.42** | paychex.com's own logo SVG (themes/custom/paychex2/images/svg/logo-paychex.svg, .st0) |
| `PaylocityIcon` | `paylocity` | fixed | #ED2024 | #ED2024 | 4.20 | 12.47 | paylocity.com design-system CSS (.styleBGBrandGradient) |
| `PaypalIcon` | `paypal` | fixed | #002991 | #002991 | 11.77 | 6.93 | PayPal's own paypal-mark-color_new.svg (site header logo on paypal.com) |
| `PersonaIcon` | `persona` | fixed | #7379FD | #7379FD | 3.45 | 3.49 | https://withpersona.com/favicon.svg (Persona, identity verification) |
| `PersonioIcon` | `personio` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | personio.design/brand/how-we-look/logo |
| `PhraseIcon` | `phrase` | pair | #181818 | #FFFFFF | 17.18 | 12.47 | Logo_primary.svg and Logo_black_background.svg on phrase.com/brand |
| `PineconeIcon` | `pinecone` | pair | #201D1E | #FFFFFF | 16.18 | 12.47 | pinecone.io/newsroom/media-kit |
| `PinterestIcon` | `pinterest` | fixed | #E60023 | #E60023 | 4.63 | 2.61 | Pinterest Gestalt tokens (color.icon.brand.primary = red.pushpin.450, identical in sema-color-light and sema-color-dark) |
| `PipedriveIcon` | `pipedrive` | fixed | #017737 | #017737 | 5.50 | 12.47 | pipedrive.com logo token --pd-puco-global-color-green-500 |
| `PlanetScaleIcon` | `planetscale` | pair | #1A1A1A | #FAFAFA | 16.84 | 11.95 | planetscale.com |
| `PocketIdIcon` | `pocketid` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | pocket-id.org header logo (fill isDark ? #ffffff : #000000) and pocket-id/pocket-id frontend/src/lib/components/logo.svelte |
| `PostgresIcon` | `postgresql` | mixed | #336791 | #336791 | 20.32 | 12.47 | the official 3-colour Slonik SVG on wiki.postgresql.org/wiki/Logo |
| `PostmarkIcon` | `postmark` | fixed | #FFDE00 | #FFDE00 | 20.32 | 9.33 | postmarkapp.com/images/logo-stamp-simple.svg |
| `PowershellIcon` | — | fixed | #00FF18 | #00FF18 | 20.32 | 12.47 | github.com/PowerShell/PowerShell/blob/master/assets/ps_black_64.svg |
| `PusherIcon` | `pusher` | pair | #300D4F | #FFFFFF | 15.68 | 12.47 | pusher.com media kit (Pusher logo primary.png / Pusher logo secondary.png) |
| `PushoverIcon` | `pushover` | fixed | #249DF1 | #249DF1 | 2.83 | 12.47 | support.pushover.net/i63-pushover-logos-and-usage |
| `QoveryIcon` | `qovery` | fixed | #642DFF | #642DFF | 6.05 | 2.00 | qovery.com/logos/qovery-logo-black.svg |
| `QuickbooksIcon` | `quickbooks` | fixed | #2CA01C | #2CA01C | 3.30 | 3.65 | the QuickBooks logo SVG on intuit.com's press room |
| `RIcon` | — | fixed | #276DC3 | #276DC3 | 6.46 | 7.89 | r-project.org/logo (gradient stops copied from the authoritative Rlogo.svg) |
| `RaindropIcon` | `raindrop` | fixed | #1988E0 | #1988E0 | 5.33 | 12.47 | app.raindrop.io/assets/icon_raw.svg and raindrop.io icon_128.png |
| `ReactIcon` | — | pair | #087EA4 | #58C4DC | 4.48 | 6.14 | react.dev brand menu (images/brand/logo_light.svg, logo_dark.svg) |
| `ReadmeIcon` | `readme` | pair | #213AFF | #FFFFFF | 6.53 | 12.47 | readme.com's own prefers-color-scheme favicon pair (favicon-213aff.ico / favicon-ffffff.ico) |
| `ReadwiseIcon` | `readwise` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | readwise.io's logo-standalone-dark.svg (light) and logo-standalone-white.svg (dark) |
| `RecraftIcon` | `recraft` | fixed | #000000 | #000000 | 20.32 | 12.47 | Recraft's press-kit "Icon White" mark (https://www.recraft.ai/press-releases) |
| `RedditIcon` | `reddit` | fixed | #FF6600 | #FF6600 | 20.32 | 12.47 | redditinc.com/brand ("a stylized Snoo head contained within an OrangeRed (#FF4500) conversation bubble") |
| `RenderIcon` | `render` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | render.com |
| `ReplicateIcon` | `replicate` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | replicate.com header logo (glyph is currentColor; site CSS sets #000, and #FFF under .dark) |
| `ResendIcon` | `resend` | pair | #000000 | #FDFDFD | 20.32 | 12.26 | cdn.resend.com/brand/resend-icon-black.svg and resend-icon-white.svg |
| `RingCentralIcon` | `ringcentral` | pair | #FF7A00 | #FFFFFF | 2.53 | 12.47 | assets.ringcentral.com/us/brand-library/logos/ringcentral-logo.zip (RingCentral logo fullcolor.svg / RingCentral logo white.svg) |
| `RocketChatIcon` | `rocketchat` | fixed | #F5455C | #F5455C | 3.45 | 3.50 | Rocket.Chat brand colours (docs.rocket.chat/v1/docs/colors), the primary red of their logo |
| `RssIcon` | `rss` | fixed | #FFA500 | #FFA500 | 1.91 | 12.47 | Mozilla's feed icon guidelines (mozilla.org/en-US/foundation/feed-icon-guidelines/), which fix no exact hex |
| `RubyIcon` | — | fixed | #FB7655 | #FB7655 | 10.63 | 12.47 | the official logo kit at ruby-lang.org/en/about/logo |
| `RunPodIcon` | `runpod` | pair | #5D29F0 | #FFFFFF | 6.68 | 12.47 | runpod.io/brandkit |
| `RustIcon` | — | pair | #000000 | #FFFFFF | 20.32 | 12.47 | rust-lang/rust-artwork |
| `S3Icon` | `s3` | fixed | #7AA116 | #7AA116 | 2.93 | 12.47 | AWS Architecture Icons (Icon-package_07312026, Arch_Storage/64/Arch_Amazon-Simple-Storage-Service_64.svg) |
| `SageIcon` | `sage_intacct` | pair | #000000 | #00D639 | 20.32 | 6.34 | @sage/design-tokens --logo-sage-bg-default |
| `SalesflareIcon` | `salesflare` | fixed | #0053FF | #0053FF | 5.52 | 2.19 | salesflare.com's own `--color--major-blue` design token |
| `SalesforceIcon` | `salesforce` | fixed | #00B3FF | #00B3FF | 2.29 | 5.28 | brand.salesforce.com/brand/color |
| `SassIcon` | — | fixed | #CC6699 | #CC6699 | 3.43 | 12.47 | sass-lang.com's own style guide token --sl-color--hopbush (assets/dist/css/sass.css) |
| `SegmentIcon` | `segment` | fixed | #52BD94 | #52BD94 | 2.24 | 5.38 | Segment's own app favicon (app.segment.com) and Evergreen green500 #52BD95 |
| `SendflakeIcon` | `snowflake` | pair | #29B5E8 | — | 2.29 | — | snowflake.com/brand-guidelines |
| `SendgridIcon` | `sendgrid` | fixed | #00B3E3 | #00B3E3 | 3.81 | 8.57 | styleguide.sendgrid.com/colors.html |
| `SensorTowerIcon` | `sensortower` | fixed | #00CFB8 | #00CFB8 | 1.91 | 12.47 | sensortower.com/favicon.svg, copied verbatim |
| `SentryIcon` | `sentry` | pair | #181225 | #FFFFFF | 17.64 | 12.47 | sentry.io/branding logo generator (Dark/Light themes, "Invert in dark mode") |
| `ServiceNowIcon` | `servicenow` | fixed | #62D84E | #62D84E | 1.77 | 6.80 | servicenow.com/company/servicenow-logo.html (servicenow-logo-icon.svg) |
| `ShopifyIcon` | `shopify` | fixed | #95BF47 | #95BF47 | 3.75 | 12.47 | shopify.com/brand-assets (shopify-logo-shopping-bag-full-color.svg: #95BF47/#5E8E3E/#fff) |
| `ShortcutIcon` | `shortcut` | pair | #494BCB | #797ADE | 6.45 | 3.36 | shortcut.com/branding (mark-default.svg; the reversed lockup uses #797ADE on dark) |
| `ShutterstockIcon` | `shutterstock` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | brand.shutterstock.com |
| `SigNozIcon` | `signoz` | fixed | #FF5E19 | #FF5E19 | 3.63 | 12.47 | signoz.io/img/SigNozLogo-orange.svg |
| `Slack` | `slack` | mixed | #E01E5A | #E01E5A | 4.51 | 6.52 | slack.com's own nav logo (a.slack-edge.com/38f0e7c/marketing/img/nav/logo.svg, linked from slack.com/media-kit) |
| `SmartsheetIcon` | `smartsheet` | pair | #031C59 | #FFFFFF | 15.46 | 12.47 | brandguides.brandfolder.com/smartsheet-visual-guide/basics |
| `SnowflakeIcon` | — | pair | #29B5E8 | — | 2.29 | — | snowflake.com/brand-guidelines |
| `SpeechifyIcon` | `speechify` | pair | #2F43FA | #FFFFFF | 6.15 | 12.47 | the Speechify brand kit (speechify.com/brand-kit, Logomark_blue.svg and Logomark_white.svg) |
| `SplitwiseIcon` | `splitwise` | pair | #1CC29F | — | 2.19 | — | splitwise.com/press (sw.svg / sw-wide.svg / bg-primary.svg) |
| `SpotifyIcon` | `spotify` | pair | #1ED760 | #FFFFFF | 1.86 | 12.47 | developer.spotify.com/documentation/design (2024 Primary Logo icon pack) |
| `SquareIcon` | `square` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | Square_Logo_2025 in squareup.com/us/en/press/logo |
| `StraleIcon` | `strale` | pair | #0D0D0E | #F2F2F3 | 18.80 | 11.15 | strale.dev favicon.svg and the site's own --foreground token |
| `StravaIcon` | `strava` | fixed | #FC5200 | #FC5200 | 3.20 | 3.77 | developers.strava.com/guidelines (Strava API logo pack, orange SVGs) |
| `StripeIcon` | `stripe` | fixed | #533AFD | #533AFD | 5.99 | 12.47 | Stripe's own favicon.svg and Stripe_logo_kit.zip (stripe.com/newsroom/brand-assets) |
| `SupabaseIcon` | `supabase` | fixed | #3ECF8E | #3ECF8E | 3.75 | 6.25 | supabase.com/brand-assets |
| `SurrealdbIcon` | `surrealdb` | mixed | #D255FE | #D255FE | 7.33 | 5.71 | surrealdb.com/brand |
| `SvelteIcon` | — | fixed | #FF3E00 | #FF3E00 | 3.42 | 12.47 | sveltejs/branding (svelte-logo.svg, white cutout #fff) |
| `TallyIcon` | `tally` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | the "Tally Icon - Black" / "Tally Icon - White" files in the icon pack on tally.so/help/press-kit, matching the live tally.so/favicon.svg |
| `TaskadeIcon` | `taskade` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | taskade.com/press (Mascot Mark light = agent_taskade.svg, Genesis Icon dark = taskade-icon-dark.svg) |
| `TelegramIcon` | `telegram` | fixed | #2AABEE | #2AABEE | 2.92 | 12.47 | Telegram's press-kit Logo.svg (telegram.org/press) |
| `TelnyxIcon` | `telnyx` | pair | #000000 | #00E3AA | 20.32 | 12.47 | telnyx.com |
| `TerraIcon` | `terra` | fixed | #008AFF | #008AFF | 20.32 | 10.43 | tryterra.co/providers/terra_icon.svg, the only vector square mark Terra ships (the site logo is a "TERRA API" wordmark, the favicon a raster .ico) |
| `TheirStackIcon` | `their_stack` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | theirstack.com/en/docs/brand, which lists both as core brand colours |
| `ThreadsIcon` | `threads` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | Meta's Threads Brand Resource Center logo pack (meta.com/brand/resources/threads) |
| `TodoistIcon` | `todoist` | fixed | #E44232 | #E44232 | 3.97 | 3.04 | Todoist Brand Guidelines (doist.com/brand-assets/todoist-logo.zip), "Red — the primary brand color for Todoist" |
| `TogetherAiIcon` | `togetherai` | fixed | #EF2CC1 | #EF2CC1 | 3.50 | 6.46 | together.ai's brand page (https://www.together.ai/brand) |
| `TogglIcon` | `toggl` | pair | #2C1138 | #E57CD8 | 16.33 | 4.87 | Toggl Track media toolkit (toggl.com/track/media-toolkit, icon-dark-purple.svg / icon-pink.svg) |
| `TomorrowIoIcon` | `tomorrow` | fixed | #004CF8 | #004CF8 | 6.00 | 12.47 | tomorrow.io's own design tokens (--color-logo-blue in site-frame.min.css, matching the header lockup SVG and logo-490.png) |
| `TrelloIcon` | `trello` | fixed | #1558BC | #1558BC | 6.44 | 12.47 | Atlassian Design logo library (atlassian.design/foundations/logos → trello_app.zip, Trello_icon.svg) |
| `TripadvisorIcon` | `tripadvisor` | fixed | #002B11 | #002B11 | 15.01 | **1.24** | 2025 Tripadvisor Brand Guidelines for Partners, tripadvisor.mediaroom.com |
| `TursoIcon` | `turso` | pair | #183134 | #FFFFFF | 13.30 | 12.47 | turso.tech/brand (Dark Teal and white logomark variants) |
| `TwilioIcon` | `twilio` | fixed | #F22F46 | #F22F46 | 3.86 | 3.13 | twilio.com (mask-icon color, favicon and apple-touch-icon artwork) |
| `TwitchIcon` | `twitch` | fixed | #9146FF | #9146FF | 4.49 | 2.69 | brand.twitch.com |
| `TwitterIcon` | `twitter` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | about.x.com |
| `TypeformIcon` | `typeform` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | typeform.com/brand |
| `UltravoxIcon` | `ultravox` | fixed | #BB3B57 | #BB3B57 | 6.67 | 7.65 | the ultravox.ai favicon (framerusercontent.com/images/hzAEdihxJ11mv3l4trNh2WprE.svg) |
| `VectaraIcon` | `vectara` | fixed | #7E00FF | #7E00FF | 7.00 | 9.80 | — |
| `VercelIcon` | `vercel` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | vercel.com |
| `VismaIcon` | `visma` | pair | #131313 | #FFFFFF | 17.98 | 12.47 | design.visma.com/logo (VA symbol from the official Visma Logopack) |
| `VueIcon` | — | fixed | #42B883 | #42B883 | 8.97 | 5.00 | vuejs/art logo.svg |
| `WebflowIcon` | `webflow` | fixed | #146EF5 | #146EF5 | 4.44 | 2.72 | brand.webflow.com/brand-assets |
| `WhatsappBusinessIcon` | `whatsapp_business` | fixed | #25D366 | #25D366 | 1.92 | 6.29 | WhatsApp's Digital_Glyph_Green_RGB_2026.svg, shipped by whatsapp.com/business (→ whatsappbusiness.com) |
| `WizIcon` | `wiz` | pair | #0254EC | #FFFFFF | 5.84 | 12.47 | wiz.io/press media kit logo pack (WizLogo_Blue_Vector.svg / WizLogo_White_Vector.svg) |
| `WooCommerceIcon` | `woocommerce` | pair | #873EFF | #FFFFFF | 4.88 | 12.47 | the Woo logo pack at woocommerce.com/brand-and-logo-guidelines (Woo_logo_color.svg and Woo_logo_white.svg) |
| `WordpressIcon` | `wordpress` | pair | #32373C | #FFFFFF | 11.63 | 12.47 | wordpress.org/about/logos/ |
| `XataIcon` | `xata` | fixed | #8468F6 | #8468F6 | 3.84 | 3.14 | xata.io/brand (logo-symbol.svg) |
| `XeroIcon` | `xero` | fixed | #13B5EA | #13B5EA | 2.30 | 12.47 | xero.com favicon.svg and the site header logo (Xero__LogoPath fill) |
| `YamlIcon` | — | mixed | #CB171E | #CB171E | 5.52 | 5.71 | yaml.org's own assets/favicon.svg and assets/logo.png; the Y, M and L carry no fill in YAML's SVG, so they take the surrounding text colour |
| `YelpIcon` | `yelp` | fixed | #FF1A1A | #FF1A1A | 3.75 | 3.22 | yelp.com/brand (burst_red.svg and the official logo kit) |
| `YnabIcon` | `ynab` | pair | #3B5EDA | #FEF9E6 | 5.35 | 11.82 | ynab.com press kit tree logo (Tree Logo Blurple.svg / Tree Logo Buttermilk.svg — the buttermilk reverse is what ynab.com itself uses on its dark footer) |
| `YoutubeIcon` | `youtube` | fixed | #FF0033 | #FF0033 | 3.83 | 12.47 | brand.youtube/color (YouTube Red, updated from #FF0000) |
| `ZammadIcon` | `zammad` | fixed | #CD2015 | #CD2015 | 7.62 | 9.73 | zammad.com favicon-32x32.svg |
| `ZendeskIcon` | `zendesk` | pair | #11110D | #FFFFFF | 18.31 | 12.47 | zendesk.com |
| `ZeroTierIcon` | `zerotier` | fixed | #FFB25B | #FFB25B | 16.58 | 6.99 | zerotier.com's own icon.svg and logo lockups |
| `ZitadelIcon` | `zitadel` | pair | #232323 | #FFFFFF | 15.21 | 12.47 | zitadel/zitadel console assets zitadel-logo-solo-dark.svg / zitadel-logo-solo-light.svg |
| `ZixflowIcon` | `zixflow` | pair | #141414 | #FFFFFF | 17.83 | 12.47 | docs.zixflow.com logo pack (logo/light.svg / logo/dark.svg) |
| `ZohoIcon` | `zoho` | pair | #000000 | #FFFFFF | 20.32 | 12.47 | zoho.com/branding (zoho-logo-web.svg / zoho-logo-white.svg) |
| `ZoomIcon` | `zoom` | pair | #0B5CFF | #FFFFFF | 5.09 | 12.47 | brand.zoom.com |
| `ZuploIcon` | `zuplo` | fixed | #FF00BD | #FF00BD | 3.39 | 3.56 | https://zuplo.com/brand |
## Rules the brand imposes
Constraints that would otherwise be broken by a well-meaning change.
- **AblyIcon** — "Don't use other colours or gradients for the symbol."
- **AcceloIcon** — The mark keeps these three fills in both themes; only the wordmark (not drawn here) swaps #10202D for white.
- **AmqpIcon** — No brand colour: AMQP is an OASIS protocol, not a vendor, and amqp.org publishes no palette (https://www.amqp.org/legal.html). Generic glyph, deliberately monochrome — keep it on currentColor.
- **AnsibleIcon** — The mark is a solid disc knocked out with a white "A", so the pair is applied by inverting rather than currentColor: recolouring the disc alone would leave white on light grey.
- **ApifyIcon** — White/black variants are reserved for monochromatic contexts, so the tricolour mark stays in both themes.
- **AppwriteIcon** — Brand asks that the logo not be altered, so no per-theme variant.
- **ArcGisIcon** — Esri publishes no reversed variant for this badge and forbids altering its logos.
- **AsanaIcon** — Asana's guidelines forbid recolouring: the symbol always appears in coral, on light and dark backgrounds alike.
- **AssemblyAiIcon** — Two colours per theme, so the second stroke carries its own fill- utilities: #777673 on light, #FFFFFF on dark.
- **AttioIcon** — The mark is a filled compound path; stroking it instead thickens it and leaks the default black fill.
- **Auth0Icon** — Okta's content terms forbid altering the mark, so ship only these published variants.
- **AutheliaIcon** — authelia.com/reference/guides/branding permits format/layout changes only — do not alter the design.
- **AuthentikIcon** — The white variant is the brand's own asset for dark backgrounds; proportions and colour must not be altered otherwise.
- **AwsEcrIcon** — AWS ships one flat fill for both themes; the gradient tile was retired in the 2023 accessibility refresh.
- **AwsIcon** — aws.amazon.com/trademark-guidelines forbids altering the logo's colour, so only these two published variants may be used.
- **BaserowIcon** — The mark keeps these three colours on light and dark; only the wordmark reverses to white.
- **BeamerIcon** — The isotype is monochrome in all first-party artwork.
- **BigQueryIcon** — Google publishes no reversed variant, so the same mark is used on both themes.
- **BitbucketIcon** — Atlassian ships brand/neutral/inverse only: "don't use unapproved color combinations".
- **BitlyIcon** — Bitly's reversed logomark is white over orange, not over neutral dark, so the orange mark is used on both.
- **BloggerIcon** — Google publishes no reversed variant.
- **BlueskyIcon** — The downloadable media-kit butterfly still ships the older #006AFF, but the palette is the normative source: "use only the official color values above. Do not substitute, tint, or approximate." White is the approved monochrome variant for dark backgrounds.
- **BoxIcon** — box.com/legal/trademark forbids any other recolouring of the mark.
- **BrevoIcon** — Brevo publishes no per-theme variant of the app mark; the reversed "Mint" #F9FFF6 asset is the wordmark only.
- **BrowserlessIcon** — Its own prefers-color-scheme block sets black on light, white on dark.
- **BubbleIcon** — Bubble's brand terms forbid re-colouring the mark beyond its published dark/light pair.
- **BuildkiteIcon** — Buildkite ships a single mark "for any context", so there is no per-theme variant, and asks that it not be altered.
- **ButtondownIcon** — Brand forbids recolouring the logo, so no per-theme variant.
- **CSharpIcon** — Its README forbids altering the mark, so the same full-colour icon is used on light and dark.
- **CalcomIcon** — Cal.com's design system states it is deliberately a grayscale brand and publishes exactly two logo variants.
- **CalendlyIcon** — Guidelines: "Only show our logo and lockups in blue or white."
- **CertopusIcon** — Verbatim copy of the brand's own circle mark: #2C353D and the white disc are its other fixed tones, not a dark-theme variant.
- **CircleCiIcon** — Guidelines require Terminal (#161616) on light backgrounds and White on dark, and forbid any color not named in them.
- **CiscoIcon** — Cisco requires all parts of the mark be knocked out to white on dark backgrounds.
- **ClerkIcon** — Same two-tone symbol on light and dark; the mono symbol-dark/symbol-light pair is Clerk's alternate for single-colour contexts.
- **ClickhouseIcon** — Brand forbids recolouring the mark, so only its own published pair is used.
- **CloseIcon** — Close forbids modifying the logo, so the same colours are kept on light and dark.
- **CloudflareIcon** — Cloudflare's logo guidelines forbid altering the colours or filling the flare, so the flare stays knocked out on both themes.
- **CloudinaryIcon** — Cloudinary Blue is reserved for the logo; no other recolouring is permitted.
- **CockroachDbIcon** — The full-colour mark is a cyan-to-purple gradient; Cockroach Labs reduces it to solid white on dark backgrounds.
- **CoinbaseIcon** — Coinbase asks that the mark not be altered or recoloured, so only these two published variants are used.
- **ComapeoIcon** — Awana Digital publishes no reversed variant, so dark mode uses the brand's own accent blue #0066FF from CoMapeoLogo.svg (digidem/comapeo-mobile); the navy is 1.3:1 on dark surfaces.
- **ConfluenceIcon** — Atlassian requires the logo be used without modification, and its brand appearance is identical in light and dark.
- **ContentfulIcon** — Same full-colour mark on light and dark.
- **ContiguityIcon** — The `>_` glyph is knocked out to the opposite colour, so it carries its own fill- utilities.
- **ConvertKitIcon** — ConvertKit rebranded to Kit in 2024.
- **CssIcon** — Small-size variant; the only per-theme variants published are mono black/white fallbacks, so the rebeccapurple tile is kept in both themes.
- **DatadogIcon** — Datadog publishes one mark per background, the purple tile with Bits knocked out on light and the white Bits silhouette on dark, and forbids recolouring or inverting either.
- **DatoCmsIcon** — Brand kit forbids altering the logo's shape or colour.
- **DbtIcon** — Their Trademark Policy states "The dbt logo mark color cannot be altered", so this stays orange on both themes.
- **DeelIcon** — Post-rebrand the period is a square in the wordmark colour, not a blue circle.
- **DeepInfraIcon** — Their brand guidelines say "use the primary white logo on dark backgrounds", where the connector bars invert to #FFFFFF.
- **DenoIcon** — Deno publishes no hex and forbids colorizing; the black "Light (no outline)" and white "Dark (outlined)" marks are separate artworks to be swapped per background, never inverted.
- **DiscordIcon** — Discord forbids recolouring the logo, so no per-theme variant.
- **DiscourseIcon** — Only the outer bubble reverses; the five inner colours are the same in both variants.
- **DockerIcon** — Docker requires its logos appear only in its primary brand colours.
- **DropboxIcon** — Dropbox's branding terms forbid recolouring the logo, and their inverse-theme token keeps the same blue.
- **DuckDbIcon** — The pair is a full inversion, so the duck carries its own fill- utilities; the manual forbids recolouring outside these two brand hexes.
- **DustIcon** — Dust's guidelines forbid recolouring the logo.
- **DynatraceIcon** — Guidelines forbid colorizing the logo, so all six fills stay fixed in both themes.
- **EdgeDbIcon** — EdgeDB is now Gel — edgedb.com redirects to geldata.com — so this is Gel's "g" symbol, not the retired EDGE|DB wordmark.
- **EnodeIcon** — Their own favicon carries the pair in a prefers-color-scheme block.
- **ExaIcon** — Blue for standard applications, white on dark backgrounds.
- **FigmaIcon** — Figma's guidelines forbid modifying the marks, so the five-colour original is used on both themes.
- **FirebaseIcon** — Same full-colour artwork on light and dark; the guidelines forbid recolouring or redrawing the mark.
- **FoxentryIcon** — Fixed tri-tone mark, no per-theme variant: the brand ships a separate greyscale logo rather than a recoloured one.
- **FreshdeskIcon** — Freshworks publishes no reversed variant: the white glyph always sits on the green leaf.
- **FunkwhaleIcon** — Identity guidelines forbid recolouring.
- **GSheetsIcon** — Google forbids recolouring its marks, so the same full-colour artwork is used on both themes.
- **GcalIcon** — Google forbids modifying its logos, colour included, so this stays fixed with no per-theme pair.
- **GdriveIcon** — Google forbids modifying its logos "in any way, including changing the color", so this stays full-colour with no per-theme pair.
- **GiphyIcon** — Same full-colour mark on light and dark.
- **GitBookIcon** — #1C1917 is the marketing palette's dark base, not the logomark.
- **GitIcon** — A white reversed logomark exists, but git-scm.com's own dark theme exempts the mark from inversion and keeps it orange.
- **GithubIcon** — GitHub allows the Invertocat in white or black only and forbids recolouring it, so the pair is fixed here rather than inherited from the caller.
- **GmailIcon** — Google's brand guidelines forbid recolouring the mark.
- **GoogleAiIcon** — Google ships no reversed variant; the same gradient is used on light and dark.
- **GoogleCalendarIcon** — Google's trademark guidelines forbid distorting or altering a brand feature, so no per-theme recolour.
- **GoogleCloudIcon** — Google forbids recolouring its logos.
- **GoogleDriveIcon** — Google's Drive branding guide permits resizing only — no other change to the logo — so no per-theme recolour.
- **GoogleFormsIcon** — Google's brand guidelines forbid modifying or recolouring its product icons.
- **GoogleIcon** — developers.google.com/identity/branding-guidelines forbids changing the colour of the G.
- **GorgiasIcon** — The guide allows only black or white for the symbol: "Do not use gray!".
- **GristIcon** — "Keep it exactly as depicted — no recoloring, no cropping."
- **GroqIcon** — Logo use in a UI requires a license from Groq.
- **HoldedIcon** — Holded ships one flat red mark for both themes; the red-orange gradient is retired.
- **HubspotIcon** — The legacy Coral #FF7A59 is not the current logo color.
- **IfsIcon** — IFS's negative lockup reverses only the wordmark, so the symbol keeps its #8427E2-to-#72C9F8 gradient on dark.
- **IftttIcon** — IFTTT's brand guidelines state "Our wordmark may be used in solid white or black" and publish no other hex for the mark.
- **IntercomIcon** — Intercom ships the mark as fill="currentColor" bound to its nav foreground token, so it takes the colour of the surface it sits on.
- **JavaIcon** — The Coffee Cup mark is licensee-only and "you may not use a modified version of the Coffee Cup logo" — do not recolour it or flatten it to currentColor.
- **JavaScriptIcon** — Fixed mark: yellow field, black lettering, no per-theme variant.
- **JiraIcon** — The logomark is identical on light and dark; only the wordmark changes colour.
- **JoomlaIcon** — Joomla's trademark policy forbids recolouring the mark, so there is no per-theme variant.
- **JotformIcon** — The other three bars keep their fixed brand colours in both themes.
- **JsonIcon** — JSON itself has no brand owner or published colours — json.org states none — so this is a Material palette pick, not a brand colour.
- **KanidmIcon** — Kanidm's artwork is CC-BY-NC-ND — no recolouring or other derivatives.
- **KlaviyoIcon** — Klaviyo draws it in currentColor, hence the white swap on dark.
- **LangfuseIcon** — Langfuse's trademark terms forbid modifying the assets.
- **LineIcon** — LINE forbids any change to the logo's colour, so there is no reversed variant.
- **LinearIcon** — Guidelines ship a light/dark logomark pair and forbid altering the assets in any other way.
- **LinkedinIcon** — That page forbids recolouring: only the approved blue, black and white variants.
- **LinodeIcon** — The keyline path stays unfilled so it follows currentColor instead of the source's near-black #231f20.
- **LumaAiIcon** — The two faces ship at 65% opacity, which is what makes their overlap read as a cube.
- **MSSqlServerIcon** — Microsoft licenses its product icons for diagrams, docs, and training only, and forbids cropping, rotating, or reshaping them.
- **MSTeamsIcon** — Microsoft's trademark guidelines forbid altering their brand assets, so the full-colour mark ships unchanged in both themes.
- **MailchimpIcon** — Mailchimp forbids altering the files, so both official tones are painted and neither is recoloured per theme.
- **MailerLiteIcon** — Their IP guidelines forbid altering or recolouring the mark.
- **MailgunIcon** — Mailgun ships no reversed variant; the tile is identical on light and dark.
- **MandrillIcon** — On dark their rule is the reversed (white) Freddie; Cavendish Yellow #FFE01B is a background colour, never the mark.
- **MarkdownIcon** — Spec: keep the enclosure's aspect ratio and radius, keep the M/arrow/box relative sizes, and draw all three in one colour.
- **MastodonIcon** — Swap to the black or white logo rather than recolouring when contrast fails.
- **MatrixIcon** — Artwork is the Foundation's matrix-icon.svg verbatim; the trademark policy forbids altering it.
- **MediumIcon** — Guidelines mandate black or white only for both the wordmark and the icon and forbid "any other colors, gradients, or filled with images".
- **MezmoIcon** — The star stays #F4B811 in both themes.
- **MicrosoftIcon** — Microsoft forbids recolouring the symbol, so it stays full-colour on both themes.
- **MistralIcon** — Brand forbids any other recolouring.
- **MixpanelIcon** — "The Mixpanel logo is only ever used in three colors: black, white and the primary brand purple."
- **MollieIcon** — The m is the glyph from Mollie-Logo-Black-2023.svg (Mollie logo pack, mollie.com/resources), scaled and placed to match that icon pixel for pixel; the logo pack itself ships only the 320x94 wordmark. Mollie publishes black and white variants, so the pair flips for dark mode.
- **MondayIcon** — All three colours are required; the brand forbids monochrome or recoloured versions, so no dark-theme variant.
- **MongodbIcon** — MongoDB permits only four logo colours, chosen for contrast with the background, and forbids any other recolour.
- **MotimateIcon** — Motimate is a registered trademark of Motimate AS (Kahoot!).
- **Mysql** — Used under Fair Use: https://fr.wikipedia.org/wiki/Fichier:MySQL.svg
- **NeonDbIcon** — Neon forbids recolouring, so only these published variants may be used.
- **NetlifyIcon** — Two colours per theme, so the "n" carries its own fill- utilities: #014847 on light, #FFFFFF on dark.
- **NetsuiteIcon** — Pre-Oracle NetSuite "N" mark. #125580/#baccdb approximate netsuite.com's own 2014 logo art, which is itself inconsistent: /portal/common/img/ns-logo.png is #14487e/#b9c9d5 and /portal/common/img/logo-ns-mobile.png is #13527d/#b6c7d5 (both via web.archive.org/web/2014/). Not Oracle's current NetSuite mark, which is a different logo in a different palette (#264759/#36677D/#94BFCE/#E2C06B).
- **NocoDbIcon** — NocoDB publishes no reversed variant; the full-colour mark is used on light and dark alike.
- **NotionIcon** — The plate is fixed, not theme-swapped: the mark is pure black and disappears on dark backgrounds without it.
- **NuIcon** — Nushell registers that one file as both the `light` and `dark` icon, so the green is not theme-swapped.
- **OdkIcon** — ODK publishes no reversed or monochrome variant.
- **OktaIcon** — Okta's official April-2025 logo package (logos-04-2025.zip) ships the mark in Black and White only.
- **OpenWeatherIcon** — Their negative (dark-background) logo reverses only the wordmark; the symbol stays brand orange.
- **OpenaiIcon** — The guidelines state "DON'T add any colors to the Blossom" — black or white only.
- **OracleDBIcon** — Oracle reserves its logo for licensees.
- **PHPIcon** — Official logo, CC BY-SA 4.0: keep it verbatim and credit Colin Viebrock rather than recolouring.
- **PaychexIcon** — The isolated P is the square mark Paychex ships as its own 192x192 app icon. Paychex requires prior approval for any use of its marks.
- **PaypalIcon** — The third fill is the deep/bright blue overlap: a two-colour or flat fill loses it.
- **PersonioIcon** — Black on light, white on dark or coloured backgrounds.
- **PhraseIcon** — The green wedge stays #03EAB3 in both — Phrase forbids altering the logo mark colour.
- **PineconeIcon** — The mark is stroke-only, so fill must stay none.
- **PinterestIcon** — Brand guidelines: "Do not alter the logo colour."
- **PipedriveIcon** — Pipedrive's partner media kit says "do not alter, rotate, modify or animate the logo", so the mark keeps its published colours on both themes.
- **PostgresIcon** — The PostgreSQL trademark policy forbids recolouring the mark without prior approval.
- **PostmarkIcon** — Postmark publishes no reversed variant.
- **PowershellIcon** — Trademarked Microsoft logo, exempt from that repo's MIT license. The #00FF18 line below is opacity-0 in the upstream asset and paints nothing.
- **PusherIcon** — Only the colourways shown in their brand guidelines are permitted.
- **PushoverIcon** — Forbids recolouring.
- **QoveryIcon** — The mark keeps the same purple in Qovery's white lockup for dark backgrounds, so there is no reversed variant.
- **QuickbooksIcon** — Intuit forbids altering the mark.
- **RIcon** — R Foundation licenses the mark CC-BY-SA 4.0 / GPL-2 — attribution required, changes must be indicated.
- **RaindropIcon** — Full-colour mark, no reversed variant published.
- **ReadwiseIcon** — The serif R and its highlight block are knocked out to the opposite colour, so they carry their own fill- utilities. Do not restore the mix-blend-mode: multiply wrapper Readwise's dark file carries: it turns the knocked-out white to the backdrop colour on anything but a white page.
- **RecraftIcon** — The plated mark carries its own background: recraft.ai serves it to prefers-color-scheme light and dark alike — not a theme pair.
- **RedditIcon** — Reddit publishes no reversed variant; the icon must always appear in Orangered when in colour.
- **RenderIcon** — Official Render Brand Kit contains only Black and White logomark folders and the SVGs use pure black / pure white.
- **ResendIcon** — Brand guidelines forbid multi-color use or altering the mark, so these are the only two published fills.
- **RssIcon** — Never rotate or flip the mark.
- **RubyIcon** — CC BY-SA 2.5; the kit's LICENSE asks that the mark not represent anything other than the Ruby language.
- **RunPodIcon** — Brand forbids recolouring, so both values are its own published cube-icon variants.
- **RustIcon** — rust-lang.org ships only rust-logo-blk.svg (pure black).
- **S3Icon** — AWS ships no dark variant for service icons.
- **SageIcon** — Sage sets its logo black on light surfaces and Sage green only on dark ones.
- **SalesforceIcon** — Salesforce reserves the white/reversed cloud for its own blue backgrounds, so the blue mark stands in both themes.
- **SegmentIcon** — Segment ships the mark in one flat green and publishes no reversed variant.
- **SendflakeIcon** — Snowflake Blue is the only approved logo color; the sole alternate is a white reverse reserved for full-bleed Snowflake Blue.
- **SendgridIcon** — Twilio's trademark guidelines forbid recolouring the mark, so it stays multicolour in both themes.
- **ServiceNowIcon** — Trademark guidelines require the mark in the graphic form provided.
- **ShopifyIcon** — The "S" stays white regardless of background; no gradients, shadows or recolouring.
- **ShortcutIcon** — The mark "is used across various colors but never changes its visual structure."
- **ShutterstockIcon** — Brand rule: the logo is only ever black or white.
- **SigNozIcon** — SigNoz ships no reversed variant; the tile mark is used unchanged on light and dark.
- **Slack** — Fixed full-colour mark, no per-theme variant.
- **SmartsheetIcon** — Those are two of the approved logo colorways; the guide forbids any other recolouring.
- **SnowflakeIcon** — Snowflake Blue is the only approved logo color; the sole alternate is a white reverse reserved for full-bleed Snowflake Blue.
- **SpeechifyIcon** — The blue logomark is reserved for white backgrounds; every other background takes the black or white monochrome version.
- **SplitwiseIcon** — Splitwise's logos carry a single green and no reversed variant, so the same colour is used on light and dark.
- **SpotifyIcon** — Spotify permits the green icon only on black or white backgrounds and requires the white monochrome colourway on any other dark background, so the pair is fixed rather than caller-set.
- **SquareIcon** — Square ships only black and white logo files and states "Do not change the color", so no tinted variant is allowed.
- **StraleIcon** — Strale's own logo component fills with currentColor, so the mark is meant to take the theme's foreground.
- **StravaIcon** — Strava's guidelines forbid modifying or altering its logos, and the orange Echelon is the mark Strava itself uses on light and dark alike.
- **StripeIcon** — Stripe's Marks Usage Terms forbid altering the marks, so this ships verbatim in both themes rather than as a recoloured pair.
- **SupabaseIcon** — Forbids modifying or recolouring the mark.
- **SurrealdbIcon** — Same gradient mark on light and dark; monochrome variants are for subtle placements only.
- **SvelteIcon** — Its guidelines count the official colour scheme as part of the mark — do not recolour.
- **TaskadeIcon** — Brand forbids recolouring, so only those two published variants are used.
- **TelegramIcon** — The shaded-plane drawing is Telegram's retired Logo_old.
- **TerraIcon** — The outlines are part of the artwork and stay black in both themes; the blue T carries the mark on dark backgrounds.
- **TheirStackIcon** — The mark ships black-only, but the same brand rules forbid placing it on low-contrast backgrounds; on a dark surface black is 1.68:1, so it is tinted to the brand's own white.
- **ThreadsIcon** — The pack ships the mark in black and white only, so it must never be tinted.
- **TogglIcon** — Toggl requires the mark be used as is, unmodified.
- **TomorrowIoIcon** — Their stylesheet reverses only the wordmark on dark headers (path.logo-letter{fill:#fff}); the mark itself stays logo blue in both themes.
- **TrelloIcon** — Atlassian: never compose your own versions or deconstruct official assets.
- **TripadvisorIcon** — Dark backgrounds take Tripadvisor's separate outlined Ollie, never an inverted or recoloured one.
- **TwilioIcon** — Twilio reserves its corporate logo for permitted use and forbids recreating or modifying it.
- **TwitchIcon** — Trademark guidelines forbid recolouring.
- **TwitterIcon** — The component draws the X glyph, not the legacy bird.
- **TypeformIcon** — Default brand colours are "Paper (white) and Ink (black)".
- **UltravoxIcon** — Gradient mark; ultravox.ai links that same asset for both prefers-color-scheme light and dark, so there is no per-theme variant.
- **VectaraIcon** — #7E00FF#07FEEE iridescent sweep, sampled from the logo mark on vectara.com (no brand kit is published). Vectara reserves its trademarks: do not recolour.
- **VercelIcon** — Vercel ships only light-theme (black) and dark-theme (white) triangle marks and explicitly forbids modifying or recoloring the trademarks.
- **VismaIcon** — Positive black on light, negative white on dark; the logo may not be given any other colour.
- **VueIcon** — Vue's dark-background variant is separate outlined artwork rather than a recolour, so the two-tone mark is used in both themes.
- **WebflowIcon** — Mark ships in blue, black or white only.
- **WhatsappBusinessIcon** — "You shouldn't modify any colors in our logos."
- **WooCommerceIcon** — Automattic requires the mark in its exact, most up-to-date form, so only their two published colorways are used, never a recolour.
- **WordpressIcon** — Every official logotype vector is BaseGray #32373C, shipped alongside a White/transparent version for dark backgrounds.
- **XataIcon** — Brand forbids recolouring, and the full-colour symbol is the same purple in light and dark modes.
- **XeroIcon** — Single-colour mark: white wordmark on the blue badge in both themes.
- **YamlIcon** — YAML publishes no reversed variant, and its black letters would be invisible on the dark surface.
- **YelpIcon** — Yelp forbids altering the logos and requires the ® to accompany the mark at all times.
- **YoutubeIcon** — "The triangle in the full-color red icon must always be white."
- **ZendeskIcon** — Zendesk's brand guidelines specify the logo in Licorice #11110D and Coconut #FFFFFF only and forbid unapproved color variations.
- **ZeroTierIcon** — The tile is identical on light and dark; only the wordmark inverts.
- **ZitadelIcon** — The gradient chevrons stay #FF8F00#FE00FF in both variants.
- **ZohoIcon** — The four squares carry their own brand hexes (#E42527/#089949/#226DB4/#F9B21D) on light; Zoho's reversed lock-up is entirely white, so they invert with the wordmark on dark.
- **ZoomIcon** — The logo "may only be used in Bloom (#0B5CFF), White, or Black", with White reserved for dark backgrounds and Black requiring prior brand approval.
- **ZuploIcon** — Brand guidelines forbid recolouring the mark; pink is the official variant on both light and dark surfaces.
## Concept icons
Not brands. These inherit `currentColor` on purpose and must not be given a pair.
`AgentInstructionsIcon`, `AiAgentIcon`, `ApiKeyAuthIcon`, `AssetDatabaseIcon`, `AssetDucklakeIcon`, `AssetGenericIcon`, `AssetResIcon`, `AssetS3Icon`, `BarsStaggered`, `BasicHttpAuthIcon`, `BcryptIcon`, `CACertificate`, `CustomAiIcon`, `DbIcon`, `FormInputIcon`, `FunnelCog`, `GpgKeyIcon`, `HttpIcon`, `JsonSchemaIcon`, `LdapIcon`, `Mail`, `OauthIcon`, `PaintbrushOff`, `QRCodeIcon`, `QuestionInputIcon`, `RecordIcon`, `RestIcon`, `SchedulePollIcon`, `SignatureAuthIcon`, `SparklesOffIcon`, `WebdavIcon`, `WindmillAiIcon`, `WindmillIcon`, `WindmillIcon2`
## Coverage
- brand icons: **314**, of which **310** carry a recorded source
- per-theme pairs applied: **136** (5 of them by inversion or a two-SVG swap, see above)
- concept icons: **34**
- effectively invisible on light: **1** (AbstractApiIcon)
- effectively invisible on dark: **2** (PaychexIcon, TripadvisorIcon)
@@ -1,12 +1,27 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M21.7142 13.6433h-4.9888a.651.651 0 00-.655.555 4.1139 4.1139 0 01-4.0619 3.5299l1.35 6.1728a10.3737 10.3737 0 009.0077-9.5447.651.651 0 00-.652-.713zm-8.6327-.158l7.1998-6.1718a.645.645 0 000-.984L13.0815.1597a.648.648 0 00-1.074.483v12.3426a.651.651 0 001.073.5zm-11.3547 1.505A10.3847 10.3847 0 0012.0115 24v-6.2698a4.0929 4.0929 0 01-4.0999-4.0869zm-.096-1.447v.1h6.2798a4.0929 4.0929 0 014.098-4.0879l-1.348-6.1698a10.3697 10.3697 0 00-9.0298 10.1577"/>
<!-- #599D15 / #FFFFFF per bamboohr.com (Encore --brandColor; bamboohr-logo-white.png is the published reversed variant). -->
<svg
class="text-[#599D15] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g transform="translate(-10.2991 -6.278) scale(0.2688)">
<path
d="M103.75,54.99c-8.52,0-13.08,2.92-16.28,6.1l-0.87,0.92l0-29.51h-7.36v47.67c0,14.37,11.07,23.33,23.77,23.33c13.99,0,24.59-10.77,24.59-24.61C127.6,66.04,116.55,54.99,103.75,54.99z M103.01,96.68c-9.27,0-17.12-7.31-17.12-17.1c0-9.8,6.61-17.84,17.28-17.84c10.67,0,16.95,8.63,16.95,17.66C120.13,89.23,113.48,96.68,103.01,96.68z"
/>
<path
d="M55.89,32.5c-0.06-0.02-0.09,0.05-0.05,0.1c7.55,8.52,13.02,18.83,15.76,25.44c-3.46-3.71-6.76-7.57-10.46-10.14c-7.5-5.23-15.42-7.82-22.76-8.8c-0.06-0.01-0.09,0.07-0.04,0.11c17.98,14.42,13.79,21.96,37.26,24.94c0.04,0.01,0.08-0.04,0.06-0.08c-3.47-10.69-4.6-18.62-10.49-24.92C63.31,37.17,57.85,33.18,55.89,32.5z"
/>
</g>
</svg>
@@ -1,12 +1,15 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#6078FF" xmlns="http://www.w3.org/2000/svg">
<path d="M22.109 7.951l1.485 2.464a3.507 3.507 0 010 3.275l-4.505 7.717a3.333 3.333 0 01-2.94 1.793H7.83a3.335 3.335 0 01-2.94-1.793l-1.555-2.632 6.139-5.695 4.447 2.578a1.093 1.093 0 001.456-.198zm-13.39.628L1.99 16.15.406 13.725a3.495 3.495 0 010-3.27L5.158 2.59A3.338 3.338 0 018.1.8h8.008c1.228 0 2.357.687 2.942 1.79l1.616 2.722-6.017 5.592-4.432-2.574a1.098 1.098 0 00-1.499.248z"/>
<!-- #5386FF per the mark in baremetrics.com's header logo (baremetrics-logo.svg), the asset this path is taken from. -->
<svg {width} {height} viewBox="0 0 24 24" fill="#5386FF" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.109 7.951l1.485 2.464a3.507 3.507 0 010 3.275l-4.505 7.717a3.333 3.333 0 01-2.94 1.793H7.83a3.335 3.335 0 01-2.94-1.793l-1.555-2.632 6.139-5.695 4.447 2.578a1.093 1.093 0 001.456-.198zm-13.39.628L1.99 16.15.406 13.725a3.495 3.495 0 010-3.27L5.158 2.59A3.338 3.338 0 018.1.8h8.008c1.228 0 2.357.687 2.942 1.79l1.616 2.722-6.017 5.592-4.432-2.574a1.098 1.098 0 00-1.499.248z"
/>
</svg>
@@ -0,0 +1,24 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #2BC3F1 / #5190EF / #4D68C4 per the baserow.io favicon and horizontal logo. The mark keeps these three colours on light and dark; only the wordmark reverses to white. -->
<svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill="#2BC3F1"
d="M1.291.068A1.29 1.29 0 0 0 0 1.36v3.352a1.29 1.29 0 0 0 1.291 1.291h3.354a1.29 1.29 0 0 0 1.289-1.291V1.359A1.29 1.29 0 0 0 4.644.07Zm9.033 0a1.29 1.29 0 0 0-1.29 1.291v3.352a1.29 1.29 0 0 0 1.29 1.291H22.71A1.29 1.29 0 0 0 24 4.711V1.359A1.29 1.29 0 0 0 22.709.07Z"
/>
<path
fill="#5190EF"
d="M1.291 9.033A1.29 1.29 0 0 0 0 10.323v3.353a1.29 1.29 0 0 0 1.291 1.29h21.418A1.29 1.29 0 0 0 24 13.677v-3.354a1.29 1.29 0 0 0-1.291-1.289Z"
/>
<path
fill="#4D68C4"
d="M1.291 17.998A1.29 1.29 0 0 0 0 19.289v3.352a1.29 1.29 0 0 0 1.291 1.29h12.385a1.29 1.29 0 0 0 1.29-1.29v-3.352a1.29 1.29 0 0 0-1.29-1.291zm18.064 0a1.29 1.29 0 0 0-1.289 1.291v3.352a1.29 1.29 0 0 0 1.29 1.29h3.353A1.29 1.29 0 0 0 24 22.642v-3.352a1.29 1.29 0 0 0-1.291-1.291z"
/>
</svg>
@@ -0,0 +1,25 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="10" cy="7" r="4" />
<path d="M10.3 15H7a4 4 0 0 0-4 4v2" />
<path d="M15 15.5V14a2 2 0 0 1 4 0v1.5" />
<rect width="8" height="5" x="13" y="16" rx=".899" />
</svg>
@@ -0,0 +1,26 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #1D2032 / #EBEDFF per developers.basistheory.com/img/bt-logo-light.svg and bt-logo-dark.svg,
which ship the same mark geometry in the two theme colours. -->
<svg
class="text-[#1D2032] dark:text-[#EBEDFF]"
{width}
{height}
viewBox="0 6.2 27.5 27.5"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26,6.2H1.4c-.8,0-1.4.6-1.4,1.4v5.1c0,.8.6,1.4,1.4,1.4h10.4c1.1,0,2.2.5,3,1.3l3.7,3.8c.7.8,1.1,1.8,1.1,2.8v10.2c0,.8.6,1.4,1.4,1.4h5.1c.8,0,1.4-.6,1.4-1.4V7.6c0-.8-.6-1.4-1.4-1.4Z"
/>
<path
d="M11.6,20c-.3-.3-.6-.4-1-.4H1.4c-.8,0-1.4.6-1.4,1.4v8.7c0,.4.1.7.4,1l2.6,2.6c.3.3.6.4,1,.4h8.7c.8,0,1.4-.6,1.4-1.4v-9.1c0-.4-.1-.7-.4-.9l-2.1-2.2Z"
/>
</svg>
@@ -1,15 +1,39 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 63H140" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28 105H140" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M70 21L56 147" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112 21L98 147" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
<path
d="M28 63H140"
stroke="currentColor"
stroke-width="14"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M28 105H140"
stroke="currentColor"
stroke-width="14"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M70 21L56 147"
stroke="currentColor"
stroke-width="14"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M112 21L98 147"
stroke="currentColor"
stroke-width="14"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
@@ -0,0 +1,35 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #1C1E21 / #FFFFFF per the getbeamer.com header logo (g#isotype) and their webclip app icon,
which sets the same mark in white on #1C1E21. The isotype is monochrome in all first-party artwork. -->
<svg
class="text-[#1C1E21] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 42 42"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Beamer"
>
<g transform="translate(1.66 -3.89)" fill="currentColor">
<path
d="M3.3,39.3c-1.1,0-2.1-0.6-2.5-1.7c-0.6-1.4,0.1-3,1.5-3.5l32-13.1c1.4-0.6,3,0.1,3.6,1.5c0.6,1.4-0.1,3-1.5,3.5l-32,13.1 C4,39.2,3.7,39.3,3.3,39.3z"
/>
<path
d="M3.3,28.9c-1.1,0-2.1-0.6-2.5-1.7c-0.6-1.4,0.1-3,1.5-3.5l32-13.1c1.4-0.6,3,0.1,3.6,1.5c0.6,1.4-0.1,3-1.5,3.5l-32,13.1 C4,28.9,3.7,28.9,3.3,28.9z"
/>
<path
d="M3.3,18.2c-1.1,0-2.1-0.6-2.5-1.7c-0.6-1.4,0.1-3,1.5-3.5l19.6-7.9c1.4-0.6,3,0.1,3.6,1.5c0.6,1.4-0.1,3-1.5,3.5L4.4,18 C4,18.2,3.7,18.2,3.3,18.2z"
/>
<path
d="M15.6,44.9c-1.1,0-2.1-0.6-2.5-1.7c-0.6-1.4,0.1-3,1.5-3.5l19.6-7.9c1.4-0.6,3,0.1,3.6,1.5c0.6,1.4-0.1,3-1.5,3.5 l-19.6,7.9C16.3,44.8,16,44.9,15.6,44.9z"
/>
</g>
</svg>
@@ -1,42 +1,36 @@
<!-- Four-colour mark per Google Cloud's official icon library (cloud.google.com/icons, core-products-icons.zip). Google publishes no reversed variant, so the same mark is used on both themes. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24"
><defs
><style>
.cls-1 {
fill: #aecbfa;
}
.cls-1,
.cls-2,
.cls-3 {
fill-rule: evenodd;
}
.cls-2 {
fill: #669df6;
}
.cls-3 {
fill: #4285f4;
}
</style></defs
><title>Icon_24px_BigQuery_Color</title><g data-name="Product Icons"
><g
><path class="cls-1" d="M6.73,10.83v2.63A4.91,4.91,0,0,0,8.44,15.2V10.83Z" /><path
class="cls-2"
d="M9.89,8.41v7.53A7.62,7.62,0,0,0,11,16,8,8,0,0,0,12,16V8.41Z"
/><path class="cls-1" d="M13.64,11.86v3.29a5,5,0,0,0,1.7-1.82V11.86Z" /><path
class="cls-3"
d="M17.74,16.32l-1.42,1.42a.42.42,0,0,0,0,.6l3.54,3.54a.42.42,0,0,0,.59,0l1.43-1.43a.42.42,0,0,0,0-.59l-3.54-3.54a.42.42,0,0,0-.6,0"
/><path
class="cls-2"
d="M11,2a9,9,0,1,0,9,9,9,9,0,0,0-9-9m0,15.69A6.68,6.68,0,1,1,17.69,11,6.68,6.68,0,0,1,11,17.69"
/></g
></g
></svg
>
<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 512 512">
<path
fill="#34a853"
d="M311.9,418.9c-8.8,0-16-7.2-16-16v-145.8c0-8.8,7.2-16,16-16s16,7.2,16,16v145.8c0,8.8-7.2,16-16,16h0Z"
/>
<path
fill="#34a853"
d="M147.6,418.9c-8.8,0-16-7.2-16-16v-200.5c0-8.8,7.2-16,16-16s16,7.2,16,16v200.5c0,8.8-7.2,16-16,16Z"
/>
<path
fill="#34a853"
d="M229.8,437.4c-8.8,0-16-7.2-16-16V147.6c0-8.8,7.2-16,16-16s16,7.2,16,16v273.7c0,8.8-7.2,16-16,16h0Z"
/>
<path
fill="#fbbc04"
d="M229.8,437.4c-114.5,0-207.6-93.1-207.6-207.6h32c0,96.8,78.8,175.6,175.6,175.6s175.6-78.8,175.6-175.6h32c0,114.5-93.1,207.6-207.6,207.6h0Z"
/>
<path
fill="#ea4335"
d="M437.4,229.8h-32c0-96.8-78.8-175.6-175.6-175.6S54.1,132.9,54.1,229.8H22.1c0-114.5,93.2-207.7,207.7-207.7s207.6,93.1,207.6,207.6h0Z"
/>
<path
fill="#4285f4"
d="M487.4,464.8l-100-100c32.3-37.6,49.9-85,49.9-135.1s-21.6-107.6-60.8-146.8l-22.6,22.6c33.2,33.2,51.4,77.3,51.4,124.2s-18.3,90.9-51.5,124.1h0c-5,5-7.5,7-11.8,10.8l122.8,122.8c3.1,3.1,7.2,4.7,11.3,4.7h0c4.1,0,8.2-1.6,11.3-4.7,6.2-6.2,6.2-16.4,0-22.6h0Z"
/>
</svg>
@@ -1,24 +1,23 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
}
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} {height} viewBox="0 0 62.42 62.42">
<defs>
<linearGradient id="New_Gradient_Swatch_1" x1="64.01" y1="30.27" x2="32.99" y2="54.48" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052cc" />
<stop offset="1" stop-color="#2684ff" />
</linearGradient>
</defs>
<title>Bitbucket-blue</title>
<g id="Layer_2" data-name="Layer 2" >
<g id="Blue" transform="translate(0 -3.13)">
<path d="M2,6.26A2,2,0,0,0,0,8.58L8.49,60.12a2.72,2.72,0,0,0,2.66,2.27H51.88a2,2,0,0,0,2-1.68L62.37,8.59a2,2,0,0,0-2-2.32ZM37.75,43.51h-13L21.23,25.12H40.9Z" fill="#2684ff" />
<path d="M59.67,25.12H40.9L37.75,43.51h-13L9.4,61.73a2.71,2.71,0,0,0,1.75.66H51.89a2,2,0,0,0,2-1.68Z" fill="url(#New_Gradient_Swatch_1)"/>
</g>
</g>
</svg>
<!-- #1868DB / #FFFFFF per atlassian.design/foundations/logos (Bitbucket mark, brand and inverse).
Atlassian ships brand/neutral/inverse only: "don't use unapproved color combinations". -->
<svg
class="text-[#1868DB] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 48 48"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M38.3789 23.417L35.9515 38.2453C35.7932 39.1424 35.16 39.6701 34.2629 39.6701H13.6827C12.7856 39.6701 12.1523 39.1424 11.994 38.2453L7.71967 11.8076C7.56136 10.9105 8.03629 10.3301 8.88061 10.3301H39.0649C39.9092 10.3301 40.3842 10.9105 40.2259 11.8076L39.0649 18.7732C38.9066 19.7759 38.3262 20.198 37.3763 20.198H19.2235C18.9596 20.198 18.8013 20.3563 18.8541 20.673L20.2789 29.4327C20.3317 29.6438 20.49 29.8021 20.701 29.8021H27.2445C27.4556 29.8021 27.6139 29.6438 27.6667 29.4327L28.6693 23.1004C28.7748 22.3088 29.3025 21.9922 30.0413 21.9922H37.1652C38.2206 21.9922 38.5372 22.5199 38.3789 23.417Z"
/>
</svg>
@@ -1,12 +1,21 @@
<!-- #F36600 on both themes per bitly.com/pages/bitly-logo-usage-guidelines-for-media (Bitly-MediaKit glyph_bitly_orange_RGB.svg). Bitly's reversed logomark is white over orange, not over neutral dark, so the orange mark is used on both. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#EE6123" xmlns="http://www.w3.org/2000/svg">
<path d="M13.055 21.26c-1.345.022-2.325-.41-2.386-1.585-.025-.44-.018-.91.002-1.192.137-1.716 1.333-2.95 2.53-3.19 1.482-.294 2.455.38 2.455 2.31 0 1.303-.36 3.618-2.59 3.657h-.016zM11.923 0C5.32 0 0 5.297 0 12.224c0 3.594 1.92 7.062 4.623 9.147.52.4 1.138.367 1.497.02.297-.285.272-.984-.285-1.475-2.16-1.886-3.652-4.76-3.652-7.635 0-5.15 4.58-9.49 9.74-9.49 6.28 0 9.636 5.102 9.636 9.43 0 2.65-1.29 5.84-3.626 7.874.015 0 .493-.942.493-2.784 0-3.13-1.976-4.836-4.28-4.836-1.663 0-2.667.598-3.34 1.152 0-1.272.045-3.652.045-3.652 0-1.572-.54-2.83-2.47-2.86-1.11-.015-1.932.493-2.44 1.647-.18.436-.12.916.254 1.125.3.18.81.046 1.046-.284.165-.21.254-.254.404-.24.24.03.257.405.257.66.014.193.193 2.903.088 9.865C7.98 21.798 9.493 24 13.1 24c1.56 0 2.756-.435 4.493-1.422C20.243 21.08 24 17.758 24 12.128 23.953 5.045 18.265 0 11.933 0"/>
<svg
{width}
{height}
viewBox="0 0 841.88983154 841.88976378"
fill="#F36600"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M140.09621293,735.35737312C46.69873176,645.31122751,0,542.58096432,0,427.16654822,0,180.54758592,191.57368493,0,419.4983359,0c230.29012095,0,422.39142788,180.54760358,422.39142788,427.16654822,0,233.10272761-205.96568737,413.47182614-385.84964913,413.47182614-74.50545286,0-128.32600445-28.13433058-156.47188338-71.94482632-9.96137265-15.50537668-18.84106723-40.50251065-20.6344876-55.65190141-1.19560769-10.09961738-1.19560769-43.6096886,0-100.53021367v-127.1354293c1.05967616-76.78983715,9.26599935-178.38447699-21.22617293-154.96540603-9.04237803,8.71300276-12.68178672,17.77146725-32.04494899,18.59991148-19.37725337-1.41147713-24.82620422-22.14288967-21.6244675-33.29630309,11.49543184-40.02969918,45.29899721-72.09576718,99.00461267-66.30744661,53.70563311,5.78832057,74.36129269,41.2911007,75.7808572,89.22075622,0,57.95447347-1.41956451,121.1901818-1.41956451,128.53850121v6.20640979c.26472922,5.75842552-.57084886,10.41530768,6.21993584,6.55670983,6.94578691-4.7161072,12.93613302-8.80274088,17.97100301-12.25986571,36.75939633-27.81687448,126.96499397-57.15961482,196.97075648,12.25986571,26.64180307,26.41867618,59.4444229,83.78008699,40.34485974,172.29429237-3.06896597,9.27647056-.61117981,10.50448074,7.3733585,3.68381865,6.59435675-6.5621485,96.96950682-87.85534889,96.96950682-241.69035834,0-172.44235497-151.42193342-316.40251613-323.7551441-316.40251613-150.16861928,0-322.02246736,119.36925022-322.02246736,329.35203394,0,65.23812916,23.41495664,145.92922597,80.73926792,208.94710482,9.36403674,10.73989762,16.46122362,18.28362081,21.29156063,22.63116957,26.15595998,22.46144057,29.59788125,50.73187925,12.21898736,71.27586943-22.34035944,22.50608007-46.21684406,24.28495022-71.62945387,5.33668108ZM457.13035686,744.89497066c78.0118436-1.25809947,90.59439219-82.19616151,91.01380577-127.90736783,0-67.51831084-34.39230182-91.42227136-85.98077221-80.93806204-41.52243858,8.38735333-83.46425543,51.58229008-88.07787541,111.55193348-.83882715,10.06486637-1.25824073,26.42023009-.41941358,41.93683728,2.0971032,41.09808076,36.48940502,56.195345,83.46425543,55.35658848Z"
/>
</svg>
@@ -1,12 +1,24 @@
<!-- #F57C00 per Google's Blogger product logo (gstatic.com/images/branding/productlogos/blogger/v5/192px.svg). Google publishes no reversed variant. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#FF5722" xmlns="http://www.w3.org/2000/svg">
<path d="M21.976 24H2.026C.9 24 0 23.1 0 21.976V2.026C0 .9.9 0 2.025 0H22.05C23.1 0 24 .9 24 2.025v19.95C24 23.1 23.1 24 21.976 24zM12 3.975H9c-2.775 0-5.025 2.25-5.025 5.025v6c0 2.774 2.25 5.024 5.025 5.024h6c2.774 0 5.024-2.25 5.024-5.024v-3.975c0-.6-.45-1.05-1.05-1.05H18c-.524 0-.976-.45-.976-.976 0-2.776-2.25-5.026-5.024-5.026zm3.074 12H9c-.525 0-.975-.45-.975-.975s.45-.976.975-.976h6.074c.526 0 .977.45.977.976s-.45.976-.975.976zm-2.55-7.95c.527 0 .976.45.976.975s-.45.975-.975.975h-3.6c-.525 0-.976-.45-.976-.975s.45-.975.975-.975h3.6z"/>
<svg {width} {height} viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
<path
d="M172,125c0,25.96-21.04,47-47,47H67c-25.96,0-47-21.04-47-47V67c0-25.96,21.04-47,47-47h58 c25.96,0,47,21.04,47,47V125z"
fill="#F57C00"
/>
<path
d="M134,89h-2.84c-3.22,0-6.16-2.78-6.16-6c0-15-11.51-27-26.64-27H79.5C64.31,56,52,68.31,52,83.5l7.59,13.85 L52,112.6v3.9c0,15.19,12.31,27.5,27.5,27.5h33c15.19,0,27.5-12.31,27.5-27.5v-3.9l-6.62-8.47L140,95C140,91.7,137.3,89,134,89z M73,84L73,84c0-3.32,2.69-6,6-6H101c3.31,0,6,2.69,6,6v0c0,3.31-2.68,6-6,6H79C75.68,90,73,87.32,73,84z M119,117L119,117 c0,3.31-2.69,6-6,6H79c-3.31,0-6-2.69-6-6v0c0-3.31,2.69-6,6-6h34C116.31,111,119,113.69,119,117z"
opacity=".2"
/>
<path
d="M134,85h-2.84c-3.22,0-6.16-2.78-6.16-6c0-15-11.51-27-26.64-27H79.5C64.31,52,52,64.31,52,79.5v33 c0,15.19,12.31,27.5,27.5,27.5h33c15.19,0,27.5-12.31,27.5-27.5V91C140,87.7,137.3,85,134,85z M73,80L73,80c0-3.32,2.69-6,6-6H101 c3.31,0,6,2.69,6,6v0c0,3.31-2.68,6-6,6H79C75.68,86,73,83.32,73,80z M119,113L119,113c0,3.31-2.69,6-6,6H79c-3.31,0-6-2.69-6-6v0 c0-3.31,2.69-6,6-6h34C116.31,107,119,109.69,119,113z"
fill="#FFFFFF"
/>
</svg>
@@ -1,12 +1,25 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#1185FE" xmlns="http://www.w3.org/2000/svg">
<path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/>
<!-- Blue500 #0560FF / Neutral0 #FFFFFF per bsky.social/about/support/branding. The downloadable
media-kit butterfly still ships the older #006AFF, but the palette is the normative source:
"use only the official color values above. Do not substitute, tint, or approximate." White is
the approved monochrome variant for dark backgrounds. -->
<svg
class="text-[#0560FF] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"
/>
</svg>
@@ -0,0 +1,16 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #A973FF per botify.com design tokens (--color--surface--purple-05). -->
<svg {width} {height} viewBox="0 0.632812 15.7288 21.951" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.72505 18.0189C9.17514 18.3277 8.54237 18.5085 7.86441 18.5085C5.77024 18.5085 4.07533 16.8136 4.07533 14.7194C4.07533 12.6253 5.77024 10.9304 7.86441 10.9304C9.95857 10.9304 11.6535 12.6253 11.6535 14.7194C11.6535 15.3974 11.4727 16.0302 11.1638 16.5801L14.0942 19.5104C15.1186 18.1846 15.7288 16.5198 15.7288 14.7119C15.7288 10.3729 12.2109 6.90776 7.87194 6.90776C6.5838 6.90776 5.371 7.27688 4.29379 7.82679V0.632812H0V14.727C0 19.5405 3.51789 22.5838 7.85687 22.5838C9.66478 22.5838 11.322 21.9737 12.6554 20.9492L9.72505 18.0189Z"
fill="#A973FF"
/>
</svg>
@@ -1,12 +1,23 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#0061D5" xmlns="http://www.w3.org/2000/svg">
<path d="M.959 5.523c-.54 0-.959.42-.959.899v7.549a4.59 4.59 0 004.613 4.494 4.717 4.717 0 004.135-2.457c.779 1.438 2.337 2.457 4.074 2.457 2.577 0 4.674-2.037 4.674-4.613.06-2.457-2.037-4.495-4.613-4.495-1.738 0-3.295.959-4.074 2.397-.78-1.438-2.338-2.397-4.135-2.397-1.079 0-2.038.36-2.817.899V6.422a.92.92 0 00-.898-.899zM17.602 9.26a.95.95 0 00-.704.158c-.36.3-.479.899-.18 1.318l2.397 3.116-2.396 3.115c-.3.42-.24.96.18 1.26.419.3 1.016.298 1.316-.122l2.039-2.636 2.096 2.697c.3.36.899.419 1.318.12.36-.3.42-.84.121-1.259l-2.338-3.115 2.338-3.057c.3-.419.298-1.018-.121-1.318-.48-.3-1.019-.24-1.318.18l-2.096 2.576-2.04-2.695c-.149-.18-.373-.3-.612-.338zM4.613 11.154c1.558 0 2.817 1.26 2.817 2.758 0 1.558-1.259 2.756-2.817 2.756-1.558 0-2.816-1.198-2.816-2.756 0-1.498 1.258-2.758 2.816-2.758zm8.27 0c1.558 0 2.816 1.26 2.816 2.758-.06 1.558-1.318 2.756-2.816 2.756-1.558 0-2.817-1.198-2.817-2.756 0-1.498 1.259-2.758 2.817-2.758Z"/>
<!-- #0061D5 / #FFFFFF per box.com (.box-logo-svg fill:#0061d5, reversed to #fff over the dark
masthead). box.com/legal/trademark forbids any other recolouring of the mark. -->
<svg
class="text-[#0061D5] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M.959 5.523c-.54 0-.959.42-.959.899v7.549a4.59 4.59 0 004.613 4.494 4.717 4.717 0 004.135-2.457c.779 1.438 2.337 2.457 4.074 2.457 2.577 0 4.674-2.037 4.674-4.613.06-2.457-2.037-4.495-4.613-4.495-1.738 0-3.295.959-4.074 2.397-.78-1.438-2.338-2.397-4.135-2.397-1.079 0-2.038.36-2.817.899V6.422a.92.92 0 00-.898-.899zM17.602 9.26a.95.95 0 00-.704.158c-.36.3-.479.899-.18 1.318l2.397 3.116-2.396 3.115c-.3.42-.24.96.18 1.26.419.3 1.016.298 1.316-.122l2.039-2.636 2.096 2.697c.3.36.899.419 1.318.12.36-.3.42-.84.121-1.259l-2.338-3.115 2.338-3.057c.3-.419.298-1.018-.121-1.318-.48-.3-1.019-.24-1.318.18l-2.096 2.576-2.04-2.695c-.149-.18-.373-.3-.612-.338zM4.613 11.154c1.558 0 2.817 1.26 2.817 2.758 0 1.558-1.259 2.756-2.817 2.756-1.558 0-2.816-1.198-2.816-2.756 0-1.498 1.258-2.758 2.816-2.758zm8.27 0c1.558 0 2.816 1.26 2.816 2.758-.06 1.558-1.318 2.756-2.816 2.756-1.558 0-2.817-1.198-2.817-2.756 0-1.498 1.259-2.758 2.817-2.758Z"
/>
</svg>
@@ -0,0 +1,58 @@
<script lang="ts">
interface Props {
/** Usually the brand's initial. */
letter: string
/** Literal Tailwind fill classes for the rounded square behind the letter, e.g.
* "fill-transparent dark:fill-[#584CCC]". */
bgClass: string
/** Literal Tailwind text classes for the letter, e.g.
* "text-[#584CCC] dark:text-white". */
textClass: string
height?: string
width?: string
size?: number
}
let {
letter,
bgClass,
textClass,
height = '24px',
width = '24px',
size = undefined
}: Props = $props()
const w = $derived(size ? `${size}px` : width)
const h = $derived(size ? `${size}px` : height)
</script>
<!-- Stand-in for brands that reserve their logo for licensees: a letter in the brand's own
colour, rather than their mark or invented artwork.
On light the letter carries the colour on a bare ground. On dark that inverts to a filled
rounded square with a light letter, because a mid-tone brand colour chosen to read on white
goes dim as a foreground on #2e3441 — the filled tile puts the contrast back into the letter.
Both class props must be written as literal strings at the call site: Tailwind only emits
classes it can see while scanning, so building them from a variable produces no CSS. -->
<svg
width={w}
height={h}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label={letter}
>
<rect width="24" height="24" rx="5" class={bgClass} />
<text
x="12"
y="12"
fill="currentColor"
class={textClass}
font-size="17"
font-weight="700"
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
text-anchor="middle"
dominant-baseline="central">{letter}</text
>
</svg>
@@ -1,12 +1,20 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#0B996E" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zM7.2 4.8h5.747c2.34 0 3.895 1.406 3.895 3.516 0 1.022-.348 1.862-1.09 2.588C17.189 11.812 18 13.22 18 14.785c0 2.86-2.64 5.016-6.164 5.016H7.199v-15zm2.085 1.952v5.537h.07c.233-.432.858-.796 2.249-1.226 2.039-.659 3.037-1.52 3.037-2.655 0-.998-.766-1.656-1.924-1.656H9.285zm4.87 5.266c-.766.385-1.67.748-2.76 1.11-1.229.387-2.11 1.386-2.11 2.407v2.315h2.365c2.387 0 4.149-1.34 4.149-3.155 0-1.067-.625-2.087-1.645-2.677z"/>
<!-- #0B996E disc with a white letterform per brevo.com's favicon.svg. Brevo publishes no per-theme variant of the app mark; the reversed "Mint" #F9FFF6 asset is the wordmark only. -->
<svg {width} {height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z"
fill="#0B996E"
/>
<path
d="M21.0024 14.5395C21.9917 13.5708 22.4552 12.4513 22.4552 11.0897C22.4552 8.27639 20.3848 6.4 17.2642 6.4H9.6V26.4H15.7803C20.478 26.4 24 23.5258 24 19.7135C24 17.6254 22.9188 15.7502 21.0024 14.5395ZM12.3813 9.00158H16.9547C18.4995 9.00158 19.5198 9.87892 19.5198 11.2101C19.5198 12.7227 18.1913 13.8726 15.4721 14.7499C13.6179 15.3242 12.784 15.8086 12.4746 16.3842L12.3813 16.385V9.00158ZM15.533 23.7984H12.3813V20.7125C12.3813 19.3509 13.5558 18.0197 15.1937 17.5049C16.6466 17.0206 17.8508 16.5363 18.8711 16.0228C20.2307 16.8101 21.0646 18.1705 21.0646 19.593C21.0646 22.0133 18.7157 23.7984 15.533 23.7984Z"
fill="white"
/>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.69 2.319a3.868 3.868 0 0 0-3.108 1.547l-.759 1.007a1.658 1.658 0 0 1-1.313.656H0V21.68h5.296a3.87 3.87 0 0 0 3.108-1.547l.759-1.006a1.656 1.656 0 0 1 1.313-.657H24V2.319h-5.31Zm1.108 11.949h-5.66a3.87 3.87 0 0 0-3.108 1.547l-.759 1.007a1.658 1.658 0 0 1-1.313.656H4.202V9.731h5.661a3.868 3.868 0 0 0 3.107-1.547l.759-1.006a1.658 1.658 0 0 1 1.313-.657h4.771l-.015 7.747Z"/>
<!-- #15191E / #FFFFFF per brex.com. -->
<svg
class="text-[#15191E] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.69 2.319a3.868 3.868 0 0 0-3.108 1.547l-.759 1.007a1.658 1.658 0 0 1-1.313.656H0V21.68h5.296a3.87 3.87 0 0 0 3.108-1.547l.759-1.006a1.656 1.656 0 0 1 1.313-.657H24V2.319h-5.31Zm1.108 11.949h-5.66a3.87 3.87 0 0 0-3.108 1.547l-.759 1.007a1.658 1.658 0 0 1-1.313.656H4.202V9.731h5.661a3.868 3.868 0 0 0 3.107-1.547l.759-1.006a1.658 1.658 0 0 1 1.313-.657h4.771l-.015 7.747Z"
/>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm4-2v4"/>
<!-- #000000 / #FFFFFF per browserless.io/favicon.svg. Its own prefers-color-scheme block sets black on light, white on dark. -->
<svg
class="text-[#000000] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="m243.9 0c0.3 0.1 26.4 15 115.1 66.5v411.8c0 391.6 0.1 411.7 1.8 411.2 0.9-0.3 69.7-34 304.1-149l0.1-61.8c0-48.9-0.3-61.6-1.3-61.3-0.6 0.2-43.6 20-95.5 44-51.8 24-94.4 43.5-94.7 43.3-0.2-0.1-0.3-128.3 0-569.6l115.5 68 1.1 256.4 191.4 111.4 0.5 243.6-213.1 104.5c-117.2 57.5-213.9 104.6-214.8 104.8-0.9 0.2-26.5-16.3-112.2-73.3l0.1-296.5c0-163.1 0.3-376.9 0.7-475.2 0.3-98.4 0.9-178.8 1.2-178.8z"
/>
</svg>
@@ -1,16 +1,24 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #0000FF dot per the logo SVG served on bubble.io/brand; the B is #262626 there, kept as
currentColor so the monochrome part follows the app theme. Bubble's brand terms forbid
re-colouring the mark beyond its published dark/light pair. -->
<svg {width} {height} viewBox="0 0 256 276" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M156.687886,71.5306475 C131.928045,71.5306475 107.524298,82.1604077 88.8931172,103.059013 L88.8931172,0 L52.0240423,0 L52.0240423,173.506229 C52.0240423,173.510361 52.0240423,173.514494 52.0240423,173.519315 C52.0240423,229.845404 97.6852437,275.506605 154.012021,275.506605 C210.33811,275.506605 256,229.845404 256,173.519315 C256,117.193226 213.013974,71.5306475 156.687886,71.5306475 M154.012021,236.224775 C119.380066,236.224775 91.3051835,208.149893 91.3051835,173.518626 C91.3051835,138.886671 119.380066,110.811789 154.012021,110.811789 C188.643288,110.811789 216.71817,138.886671 216.71817,173.518626 C216.71817,208.150582 188.643288,236.224775 154.012021,236.224775" fill="currentColor"></path>
<path d="M25.2199377,225.066041 C11.2909777,225.066041 1.0658141e-14,236.357707 1.0658141e-14,250.285979 C1.0658141e-14,264.21425 11.2909777,275.505916 25.2199377,275.505916 C39.1488977,275.505916 50.4398754,264.21425 50.4398754,250.285979 C50.4398754,236.357707 39.1488977,225.066041 25.2199377,225.066041" fill="#0000FF"></path>
</g>
<g>
<path
d="M156.687886,71.5306475 C131.928045,71.5306475 107.524298,82.1604077 88.8931172,103.059013 L88.8931172,0 L52.0240423,0 L52.0240423,173.506229 C52.0240423,173.510361 52.0240423,173.514494 52.0240423,173.519315 C52.0240423,229.845404 97.6852437,275.506605 154.012021,275.506605 C210.33811,275.506605 256,229.845404 256,173.519315 C256,117.193226 213.013974,71.5306475 156.687886,71.5306475 M154.012021,236.224775 C119.380066,236.224775 91.3051835,208.149893 91.3051835,173.518626 C91.3051835,138.886671 119.380066,110.811789 154.012021,110.811789 C188.643288,110.811789 216.71817,138.886671 216.71817,173.518626 C216.71817,208.150582 188.643288,236.224775 154.012021,236.224775"
fill="currentColor"
></path>
<path
d="M25.2199377,225.066041 C11.2909777,225.066041 1.0658141e-14,236.357707 1.0658141e-14,250.285979 C1.0658141e-14,264.21425 11.2909777,275.505916 25.2199377,275.505916 C39.1488977,275.505916 50.4398754,264.21425 50.4398754,250.285979 C50.4398754,236.357707 39.1488977,225.066041 25.2199377,225.066041"
fill="#0000FF"
></path>
</g>
</svg>
@@ -1,12 +1,16 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#14CC80" xmlns="http://www.w3.org/2000/svg">
<path d="M23.613 8.143l-7.668-3.856v7.712l7.668-3.855zM8.166 15.857V8.143L.387 4.287V12l7.78 3.857zM.183 3.958a.382.382 0 01.377-.017l7.606 3.771 7.607-3.771a.386.386 0 01.346 0l7.668 3.857a.386.386 0 01.213.345v7.71a.388.388 0 01-.213.346l-7.668 3.86a.389.389 0 01-.562-.345v-7.09l-7.219 3.58a.392.392 0 01-.344 0L.215 12.346A.387.387 0 010 12V4.287a.385.385 0 01.183-.329z"/>
<!-- #14CC80 / #30F2A2 per buildkite.com/about/brand-assets. Buildkite ships a single mark "for any context", so there is no per-theme variant, and asks that it not be altered. -->
<svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#30F2A2" d="M0 4v8l8 4V8L0 4Z" />
<path fill="#14CC80" d="M8 8v8l8-4V4L8 8Z" />
<path fill="#30F2A2" d="M16 4v8l8-4-8-4Z" />
<path fill="#14CC80" d="M16 12v8l8-4V8l-8 4Z" />
</svg>
@@ -1,12 +1,13 @@
<script lang="ts">
interface Props {
height?: number;
width?: number;
height?: number
width?: number
}
let { height = 24, width = 24 }: Props = $props();
let { height = 24, width = 24 }: Props = $props()
</script>
<!-- #fbf0df per https://bun.com/logo.svg. -->
<svg
id="Bun"
xmlns="http://www.w3.org/2000/svg"
@@ -0,0 +1,20 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #0069FF (Buttondown Blue) per https://buttondown.com/brand. Brand forbids recolouring the logo, so no per-theme variant. -->
<svg {width} {height} viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<g fill="#0069ff" fill-rule="nonzero" transform="matrix(.100402 0 0 -.100402 -.60241 299.996)"
><path
d="m1940 2982c-114 12-809 3-872-2-536-44-907-357-1023-864-28-126-39-297-39-616 0-418 16-570 81-760 105-309 344-548 653-653 190-65 342-81 760-81s570 16 760 81c309 105 548 344 653 653 65 190 81 342 81 760 0 492-29 684-139 900-171 335-489 538-915 582zm215-617c101.38 0 210-118.62 210-220v-1290c0-103.709-116.29-220-220-220h-1280c-102.364 0-209 122.636-209 225 0 247.96-24 1200 0 1280 33 110 108 188 214 221 14 4 1121.6 4 1285 4z"
/><path
d="m873 1715c-51-51-93-98-93-103 0-17 134.877-132.88 229.54-203.38 69.15-51.49 257.04-201.56 335.81-236.61 83.3-37.06 240.3-36.64 328.02-3.67 124.17 46.67 230.42 137.87 419.63 300.66l148 145-98 98c-54 54-101 98-104 98-4 0-105.51-95.16-141.7-131.02-53.08-52.58-88.38-83.3-212.93-185.03-17.17-14.02-73.11-56.64-161.44-56.64s-150.86 46.37-170.51 56.64c-52.84 27.63-165.35 126.38-228.42 179.05-51.97 43.41-145 137-150 137-5-1-51-43-101-95z"
transform="translate(-10.5 20.0314)"
/></g
>
</svg>
@@ -1,12 +1,17 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.29344C22 11.7692 19.1708 14.5869 15.6807 14.5869C15.0439 14.5869 13.5939 14.4405 12.8885 13.8551L12.0067 14.7333C11.4883 15.2496 11.6283 15.4016 11.8589 15.652C11.9551 15.7565 12.0672 15.8781 12.1537 16.0505C12.1537 16.0505 12.8885 17.075 12.1537 18.0995C11.7128 18.6849 10.4783 19.5045 9.06754 18.0995L8.77362 18.3922C8.77362 18.3922 9.65538 19.4167 8.92058 20.4412C8.4797 21.0267 7.30403 21.6121 6.27531 20.5876L5.2466 21.6121C4.54119 22.3146 3.67905 21.9048 3.33616 21.6121L2.45441 20.7339C1.63143 19.9143 2.1115 19.0264 2.45441 18.6849L10.0963 11.0743C10.0963 11.0743 9.3615 9.90338 9.3615 8.29344C9.3615 4.81767 12.1907 2 15.6807 2C19.1708 2 22 4.81767 22 8.29344ZM15.681 10.4889C16.8984 10.4889 17.8853 9.50601 17.8853 8.29353C17.8853 7.08105 16.8984 6.09814 15.681 6.09814C14.4635 6.09814 13.4766 7.08105 13.4766 8.29353C13.4766 9.50601 14.4635 10.4889 15.681 10.4889Z" fill="#1C274C"/>
</svg>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22 8.29344C22 11.7692 19.1708 14.5869 15.6807 14.5869C15.0439 14.5869 13.5939 14.4405 12.8885 13.8551L12.0067 14.7333C11.4883 15.2496 11.6283 15.4016 11.8589 15.652C11.9551 15.7565 12.0672 15.8781 12.1537 16.0505C12.1537 16.0505 12.8885 17.075 12.1537 18.0995C11.7128 18.6849 10.4783 19.5045 9.06754 18.0995L8.77362 18.3922C8.77362 18.3922 9.65538 19.4167 8.92058 20.4412C8.4797 21.0267 7.30403 21.6121 6.27531 20.5876L5.2466 21.6121C4.54119 22.3146 3.67905 21.9048 3.33616 21.6121L2.45441 20.7339C1.63143 19.9143 2.1115 19.0264 2.45441 18.6849L10.0963 11.0743C10.0963 11.0743 9.3615 9.90338 9.3615 8.29344C9.3615 4.81767 12.1907 2 15.6807 2C19.1708 2 22 4.81767 22 8.29344ZM15.681 10.4889C16.8984 10.4889 17.8853 9.50601 17.8853 8.29353C17.8853 7.08105 16.8984 6.09814 15.681 6.09814C14.4635 6.09814 13.4766 7.08105 13.4766 8.29353C13.4766 9.50601 14.4635 10.4889 15.681 10.4889Z"
fill="currentColor"
/>
</svg>
@@ -1,18 +1,41 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
}
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 256 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M255.569,84.452376 C255.567,79.622376 254.534,75.354376 252.445,71.691376 C250.393,68.089376 247.32,65.070376 243.198,62.683376 C209.173,43.064376 175.115,23.505376 141.101,3.86637605 C131.931,-1.42762395 123.04,-1.23462395 113.938,4.13537605 C100.395,12.122376 32.59,50.969376 12.385,62.672376 C4.064,67.489376 0.015,74.861376 0.013,84.443376 C0,123.898376 0.013,163.352376 0,202.808376 C0,207.532376 0.991,211.717376 2.988,215.325376 C5.041,219.036376 8.157,222.138376 12.374,224.579376 C32.58,236.282376 100.394,275.126376 113.934,283.115376 C123.04,288.488376 131.931,288.680376 141.104,283.384376 C175.119,263.744376 209.179,244.186376 243.209,224.567376 C247.426,222.127376 250.542,219.023376 252.595,215.315376 C254.589,211.707376 255.582,207.522376 255.582,202.797376 C255.582,202.797376 255.582,123.908376 255.569,84.452376" fill="#A179DC" fill-rule="nonzero"></path>
<path d="M128.182,143.241376 L2.988,215.325376 C5.041,219.036376 8.157,222.138376 12.374,224.579376 C32.58,236.282376 100.394,275.126376 113.934,283.115376 C123.04,288.488376 131.931,288.680376 141.104,283.384376 C175.119,263.744376 209.179,244.186376 243.209,224.567376 C247.426,222.127376 250.542,219.023376 252.595,215.315376 L128.182,143.241376" fill="#280068" fill-rule="nonzero"></path>
<path d="M255.569,84.452376 C255.567,79.622376 254.534,75.354376 252.445,71.691376 L128.182,143.241376 L252.595,215.315376 C254.589,211.707376 255.58,207.522376 255.582,202.797376 C255.582,202.797376 255.582,123.908376 255.569,84.452376" fill="#390091" fill-rule="nonzero"></path>
<path d="M201.892326,116.294008 L201.892326,129.767692 L215.36601,129.767692 L215.36601,116.294008 L222.102852,116.294008 L222.102852,129.767692 L235.576537,129.767692 L235.576537,136.504534 L222.102852,136.504534 L222.102852,149.978218 L235.576537,149.978218 L235.576537,156.71506 L222.102852,156.71506 L222.102852,170.188744 L215.36601,170.188744 L215.36601,156.71506 L201.892326,156.71506 L201.892326,170.188744 L195.155484,170.188744 L195.155484,156.71506 L181.6818,156.71506 L181.6818,149.978218 L195.155484,149.978218 L195.155484,136.504534 L181.6818,136.504534 L181.6818,129.767692 L195.155484,129.767692 L195.155484,116.294008 L201.892326,116.294008 Z M215.36601,136.504534 L201.892326,136.504534 L201.892326,149.978218 L215.36601,149.978218 L215.36601,136.504534 Z" fill="#FFFFFF"></path>
<path d="M128.456752,48.625876 C163.600523,48.625876 194.283885,67.7121741 210.718562,96.0819435 L210.558192,95.808876 L169.209615,119.617159 C161.062959,105.823554 146.128136,96.5150717 128.996383,96.3233722 L128.456752,96.3203544 C102.331178,96.3203544 81.1506705,117.499743 81.1506705,143.625316 C81.1506705,152.168931 83.4284453,160.17752 87.3896469,167.094792 C95.543745,181.330045 110.872554,190.931398 128.456752,190.931398 C146.149522,190.931398 161.565636,181.208041 169.67832,166.820563 L169.481192,167.165876 L210.767678,191.083913 C194.51328,219.21347 164.25027,238.240861 129.514977,238.620102 L128.456752,238.625876 C93.2021701,238.625876 62.4315028,219.422052 46.0382398,190.902296 C38.0352471,176.979327 33.4561922,160.837907 33.4561922,143.625316 C33.4561922,91.1592636 75.9884604,48.625876 128.456752,48.625876 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<!-- #927BE5 → #512BD4 gradient per dotnet/brand logo/language-icons/csharp-72.svg (CC0). Its README forbids altering the mark, so the same full-colour icon is used on light and dark. -->
<svg
{width}
{height}
viewBox="0 0 72 72"
fill="none"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
>
<path
d="M8 24.4518V47.5458C8 50.4038 9.524 53.0458 12 54.4738L32 66.0218C34.476 67.4518 37.524 67.4518 40 66.0218L60 54.4738C62.476 53.0438 64 50.4038 64 47.5458V24.4518C64 21.5938 62.476 18.9518 60 17.5238L40 5.97777C37.524 4.54777 34.476 4.54777 32 5.97777L12 17.5238C9.524 18.9538 8 21.5938 8 24.4518Z"
fill="url(#csharp-grad)"
/>
<path
d="M22 32V40C22 40.53 22.21 41.04 22.586 41.414C22.962 41.79 23.47 42 24 42C24.53 42 25.04 41.79 25.414 41.414C25.79 41.038 26 40.53 26 40C26 39.47 26.21 38.96 26.586 38.586C26.962 38.21 27.47 38 28 38C28.53 38 29.04 38.21 29.414 38.586C29.79 38.962 30 39.47 30 40C30 41.592 29.368 43.118 28.242 44.242C27.116 45.368 25.59 46 24 46C22.41 46 20.882 45.368 19.758 44.242C18.632 43.116 18 41.59 18 40V32C18 30.408 18.632 28.882 19.758 27.758C20.884 26.632 22.41 26 24 26C25.59 26 27.118 26.632 28.242 27.758C29.366 28.884 30 30.41 30 32C30 32.53 29.79 33.04 29.414 33.414C29.038 33.79 28.53 34 28 34C27.47 34 26.96 33.79 26.586 33.414C26.21 33.038 26 32.53 26 32C26 31.47 25.79 30.96 25.414 30.586C25.038 30.21 24.53 30 24 30C23.47 30 22.96 30.21 22.586 30.586C22.21 30.962 22 31.47 22 32ZM54 40C54 40.53 53.79 41.04 53.414 41.414C53.038 41.79 52.53 42 52 42H50V44C50 44.53 49.79 45.04 49.414 45.414C49.038 45.788 48.53 46 48 46C47.47 46 46.96 45.79 46.586 45.414C46.212 45.038 46 44.53 46 44V42H42V44C42 44.53 41.79 45.04 41.414 45.414C41.038 45.788 40.53 46 40 46C39.47 46 38.96 45.79 38.586 45.414C38.21 45.038 38 44.53 38 44V42H36C35.47 42 34.96 41.79 34.586 41.414C34.21 41.038 34 40.53 34 40C34 39.47 34.21 38.96 34.586 38.586C34.962 38.21 35.47 38 36 38H38V34H36C35.47 34 34.96 33.79 34.586 33.414C34.21 33.038 34 32.53 34 32C34 31.47 34.21 30.96 34.586 30.586C34.962 30.21 35.47 30 36 30H38V28C38 27.47 38.21 26.96 38.586 26.586C38.962 26.21 39.47 26 40 26C40.53 26 41.04 26.21 41.414 26.586C41.79 26.962 42 27.47 42 28V30H46V28C46 27.47 46.21 26.96 46.586 26.586C46.962 26.21 47.47 26 48 26C48.53 26 49.04 26.21 49.414 26.586C49.788 26.962 50 27.47 50 28V30H52C52.53 30 53.04 30.21 53.414 30.586C53.788 30.962 54 31.47 54 32C54 32.53 53.79 33.04 53.414 33.414C53.038 33.79 52.53 34 52 34H50V38H52C52.53 38 53.04 38.21 53.414 38.586C53.788 38.962 54 39.47 54 40ZM46 34H42V38H46V34Z"
fill="white"
/>
<defs>
<linearGradient
id="csharp-grad"
x1="13.5"
y1="18.5"
x2="40.5"
y2="65.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#927BE5" />
<stop offset="1" stop-color="#512BD4" />
</linearGradient>
</defs>
</svg>
@@ -1,13 +1,16 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #292929 / #FAFAFA per design.cal.com. Cal.com's design system states it is deliberately a
grayscale brand and publishes exactly two logo variants. -->
<svg
class="text-[#292929] dark:text-[#FAFAFA]"
x="0px"
y="0px"
{width}
@@ -1,12 +1,23 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#006BFF" xmlns="http://www.w3.org/2000/svg">
<path d="M19.655 14.262c.281 0 .557.023.828.064 0 .005-.005.01-.005.014-.105.267-.234.534-.381.786l-1.219 2.106c-1.112 1.936-3.177 3.127-5.411 3.127h-2.432c-2.23 0-4.294-1.191-5.412-3.127l-1.218-2.106a6.251 6.251 0 0 1 0-6.252l1.218-2.106C6.736 4.832 8.8 3.641 11.035 3.641h2.432c2.23 0 4.294 1.191 5.411 3.127l1.219 2.106c.147.252.271.519.381.786 0 .004.005.009.005.014-.267.041-.543.064-.828.064-1.816 0-2.501-.607-3.291-1.306-.764-.676-1.711-1.517-3.44-1.517h-1.029c-1.251 0-2.387.455-3.2 1.278-.796.805-1.233 1.904-1.233 3.099v1.411c0 1.196.437 2.295 1.233 3.099.813.823 1.949 1.278 3.2 1.278h1.034c1.729 0 2.676-.841 3.439-1.517.791-.703 1.471-1.306 3.287-1.301Zm.005-3.237c.399 0 .794-.036 1.179-.11-.002-.004-.002-.01-.002-.014-.073-.414-.193-.823-.349-1.218.731-.12 1.407-.396 1.986-.819 0-.004-.005-.013-.005-.018-.331-1.085-.832-2.101-1.489-3.03-.649-.915-1.435-1.719-2.331-2.395-1.867-1.398-4.088-2.138-6.428-2.138-1.448 0-2.855.28-4.175.841-1.273.543-2.423 1.315-3.407 2.299S2.878 6.552 2.341 7.83c-.557 1.324-.842 2.726-.842 4.175 0 1.448.281 2.855.842 4.174.542 1.274 1.314 2.423 2.298 3.407s2.129 1.761 3.407 2.299c1.324.556 2.727.841 4.175.841 2.34 0 4.561-.74 6.428-2.137a10.815 10.815 0 0 0 2.331-2.396c.652-.929 1.158-1.949 1.489-3.03 0-.004.005-.014.005-.018-.579-.423-1.255-.699-1.986-.819.161-.395.276-.804.349-1.218.005-.009.005-.014.005-.023.869.166 1.692.506 2.404 1.035.685.505.552 1.075.446 1.416C22.184 20.437 17.619 24 12.221 24c-6.625 0-12-5.375-12-12s5.37-12 12-12c5.398 0 9.963 3.563 11.471 8.464.106.341.239.915-.446 1.421-.717.529-1.535.873-2.404 1.034.128.716.128 1.45 0 2.166-.387-.074-.782-.11-1.182-.11-4.184 0-3.968 2.823-6.736 2.823h-1.029c-1.899 0-3.15-1.357-3.15-3.095v-1.411c0-1.738 1.251-3.094 3.15-3.094h1.034c2.768 0 2.552 2.823 6.731 2.827Z"/>
<!-- #006BFF / #FFFFFF per Calendly's 2024 External Brand Guidelines and calendly_brand mark_white.svg
(media kit on calendly.com/newsroom). Guidelines: "Only show our logo and lockups in blue or white." -->
<svg
class="text-[#006BFF] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.655 14.262c.281 0 .557.023.828.064 0 .005-.005.01-.005.014-.105.267-.234.534-.381.786l-1.219 2.106c-1.112 1.936-3.177 3.127-5.411 3.127h-2.432c-2.23 0-4.294-1.191-5.412-3.127l-1.218-2.106a6.251 6.251 0 0 1 0-6.252l1.218-2.106C6.736 4.832 8.8 3.641 11.035 3.641h2.432c2.23 0 4.294 1.191 5.411 3.127l1.219 2.106c.147.252.271.519.381.786 0 .004.005.009.005.014-.267.041-.543.064-.828.064-1.816 0-2.501-.607-3.291-1.306-.764-.676-1.711-1.517-3.44-1.517h-1.029c-1.251 0-2.387.455-3.2 1.278-.796.805-1.233 1.904-1.233 3.099v1.411c0 1.196.437 2.295 1.233 3.099.813.823 1.949 1.278 3.2 1.278h1.034c1.729 0 2.676-.841 3.439-1.517.791-.703 1.471-1.306 3.287-1.301Zm.005-3.237c.399 0 .794-.036 1.179-.11-.002-.004-.002-.01-.002-.014-.073-.414-.193-.823-.349-1.218.731-.12 1.407-.396 1.986-.819 0-.004-.005-.013-.005-.018-.331-1.085-.832-2.101-1.489-3.03-.649-.915-1.435-1.719-2.331-2.395-1.867-1.398-4.088-2.138-6.428-2.138-1.448 0-2.855.28-4.175.841-1.273.543-2.423 1.315-3.407 2.299S2.878 6.552 2.341 7.83c-.557 1.324-.842 2.726-.842 4.175 0 1.448.281 2.855.842 4.174.542 1.274 1.314 2.423 2.298 3.407s2.129 1.761 3.407 2.299c1.324.556 2.727.841 4.175.841 2.34 0 4.561-.74 6.428-2.137a10.815 10.815 0 0 0 2.331-2.396c.652-.929 1.158-1.949 1.489-3.03 0-.004.005-.014.005-.018-.579-.423-1.255-.699-1.986-.819.161-.395.276-.804.349-1.218.005-.009.005-.014.005-.023.869.166 1.692.506 2.404 1.035.685.505.552 1.075.446 1.416C22.184 20.437 17.619 24 12.221 24c-6.625 0-12-5.375-12-12s5.37-12 12-12c5.398 0 9.963 3.563 11.471 8.464.106.341.239.915-.446 1.421-.717.529-1.535.873-2.404 1.034.128.716.128 1.45 0 2.166-.387-.074-.782-.11-1.182-.11-4.184 0-3.968 2.823-6.736 2.823h-1.029c-1.899 0-3.15-1.357-3.15-3.095v-1.411c0-1.738 1.251-3.094 3.15-3.094h1.034c2.768 0 2.552 2.823 6.731 2.827Z"
/>
</svg>
@@ -0,0 +1,30 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #008AFF / #FFFFFF per app.campayn.com/images/campayn/favicons/safari-pinned-tab.svg (colours sampled from android-chrome-512x512.png in the same directory). -->
<svg
{width}
{height}
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Campayn"
>
<rect width="1024" height="1024" fill="#008AFF" />
<g transform="translate(0,1024) scale(0.1,-0.1)">
<path
fill="#FFFFFF"
d="M6774 8125 c482 -57 851 -208 1105 -450 182 -173 295 -374 347 -615 26 -120 26 -368 0 -465 -141 -533 -734 -810 -1798 -841 -377 -11 -646 23 -931 116 -263 87 -453 191 -892 491 -126 86 -273 183 -325 215 -220 133 -452 238 -638 288 -406 108 -881 13 -1286 -257 -108 -73 -112 -69 -48 38 45 75 186 218 272 274 244 158 573 241 961 241 l152 0 101 98 c194 187 414 343 673 474 474 242 980 367 1673 412 116 8 511 -4 634 -19z M3380 6560 c305 -84 619 -240 888 -442 50 -38 92 -71 92 -74 0 -2 -52 -188 -115 -412 -354 -1249 -428 -1514 -441 -1580 -19 -99 -18 -282 1 -357 73 -281 312 -459 718 -536 88 -17 165 -22 364 -26 551 -11 1008 47 1433 182 149 48 226 55 272 27 79 -49 121 -200 100 -360 -18 -135 -70 -231 -191 -353 -152 -153 -344 -264 -611 -352 -342 -114 -723 -166 -1245 -172 -428 -4 -714 23 -1012 96 -948 232 -1352 820 -1178 1716 29 148 571 2074 627 2228 67 182 189 435 211 435 7 0 46 -9 87 -20z"
/>
<path
fill="#008AFF"
d="M5807 7105 c-250 -31 -466 -91 -657 -181 -111 -53 -270 -149 -270 -164 0 -3 42 -29 93 -57 454 -250 784 -344 1207 -345 250 -1 408 29 553 104 181 94 249 230 181 366 -63 126 -240 221 -499 268 -123 22 -465 28 -608 9z"
/>
</g>
</svg>
@@ -0,0 +1,38 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FF6E30 per https://certopus.com/images/logo/logo_circle.svg. Verbatim copy of the brand's own
circle mark: #2C353D and the white disc are its other fixed tones, not a dark-theme variant. -->
<svg {width} {height} viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="150" fill="white" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M300 150C300 232.843 232.843 300 150 300C67.1573 300 0 232.843 0 150C0 67.1573 67.1573 0 150 0C232.843 0 300 67.1573 300 150ZM260 150C260 210.751 210.751 260 150 260C89.2487 260 40 210.751 40 150C40 89.2487 89.2487 40 150 40C210.751 40 260 89.2487 260 150Z"
fill="#FF6E30"
/>
<path
d="M81.7585 184.256C79.5697 184.247 78.0439 181.947 77.1625 180.58C73.7551 175.289 74.1991 169.192 74.4025 166.793C74.7845 162.222 76.2553 157.81 78.6919 153.925C81.6487 149.368 85.3153 147.14 90.6403 143.814C93.8769 141.829 97.2566 140.088 100.752 138.605C109.563 135.032 197.539 136.769 200.938 140.75C206.777 147.587 208.387 159.796 206.454 169.856C204.927 177.795 200.663 185.153 199.407 187.321C198.67 188.591 198.799 188.267 190.215 200.801C184.426 209.253 183.495 210.677 182.556 212.137C179.142 217.454 178.989 218.091 175.815 222.861C172.431 227.946 172.006 228.125 170.3 231.133C167.996 235.198 166.7 237.487 165.705 240.937C164.381 245.536 164.782 248.085 162.64 249.517C161.071 250.566 159.195 250.305 158.045 250.13C152.865 249.338 149.556 244.73 145.177 238.49C142.557 234.756 141.022 232.568 139.662 228.992C137.979 224.6 137.248 219.901 137.517 215.205C137.877 210.947 139.019 206.792 140.887 202.949C143.185 198.12 146.421 194.549 152.836 187.63C156.338 183.85 155.728 184.783 163.262 176.925C164.13 176.021 168.676 171.258 173.977 164.651C178.254 159.321 178.483 158.448 178.266 158.218C177.986 157.918 176.8 158.492 170.913 162.507C164.781 166.688 160.496 169.86 160.496 169.86C156.504 172.815 153.426 175.093 149.16 178.44C142.253 183.856 138.799 186.565 137.52 187.938C135.6 189.996 129.232 197.209 126.796 207.24C126.074 210.265 125.562 213.336 125.265 216.431C124.842 221.557 124.63 224.119 124.651 224.398C124.761 225.803 124.957 226.781 124.345 227.461C123.096 228.849 119.672 227.671 118.218 227.155C110.934 224.57 106.212 219.028 104.43 216.738C101.413 212.785 99.1302 208.323 97.6897 203.563C96.7519 200.508 95.0911 195.103 95.8513 188.55C97.2853 176.195 106.34 168.299 108.413 166.491C111.462 163.832 116.573 160.94 126.796 155.155C131.673 152.395 135.561 150.362 135.376 149.947C135.171 149.489 130.351 151.701 121.896 153.929C115.439 155.631 114.94 155.213 110.559 156.689C107.193 157.822 103.305 159.161 98.9191 162.204C94.0051 165.612 91.2391 169.234 89.1145 172.009C87.3511 174.316 86.4607 175.504 86.0509 177.217C85.4773 179.617 86.1019 181.195 84.8251 182.732C84.4415 183.177 83.9726 183.542 83.4459 183.804C82.9193 184.066 82.3455 184.22 81.7585 184.256Z"
fill="#2C353D"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M133.87 52.5118C139.358 50.9721 145.022 50.1482 150.722 50.0608V50.0584C159.964 49.6229 169.157 51.6303 177.377 55.8784C181.232 57.6433 184.838 59.9097 188.1 62.6188C190.593 64.7446 192.258 66.679 195.759 71.1988C198.968 75.3394 200.752 77.8191 202.568 80.3442C203.655 81.8553 204.754 83.3828 206.177 85.2922C208.687 88.6598 210.594 91.0512 213.334 94.4871C215.444 97.1332 218.048 100.399 221.802 105.207C230.037 115.753 228.94 114.683 227.899 113.52C228.561 114.334 229.089 115.251 229.462 116.237C230.384 118.986 229.538 121.559 229.155 122.671C228.26 125.275 226.772 126.839 224.866 128.799C222.682 131.055 220.21 133.012 217.513 134.619C213.247 137.063 208.577 138.724 203.726 139.521C202.473 139.732 201.137 139.936 199.725 140.133C201.839 139.044 204.926 129.617 204.926 129.617C205.451 127.329 205.826 125.009 206.049 122.672C206.21 121.248 206.279 119.816 206.254 118.383C206.199 116.813 206.034 115.249 205.76 113.703C205.471 111.762 205.075 109.839 204.572 107.943C203.837 105.301 202.911 102.716 201.801 100.209C200.329 96.6587 199.486 94.6253 197.83 92.0129C196.688 90.2006 195.39 88.4918 193.949 86.9063L193.948 86.9045C192.057 84.8402 189.827 82.4058 186.188 80.7791C183.702 79.5752 180.955 79.0133 178.196 79.1447C175.6 79.3109 173.816 80.1407 170.256 81.8003C168.651 82.5475 167.919 82.9856 166.894 83.5984C165.856 84.2188 164.519 85.0181 161.676 86.4983C161.676 86.4983 158.832 87.9779 154.935 89.5619C153.691 90.1112 152.389 90.5221 151.055 90.7871C149.574 91.0703 148.061 91.1392 146.561 90.9917C144.863 90.7704 143.209 90.2881 141.659 89.5619C140.675 89.1489 139.719 88.6721 138.798 88.1345C136.095 86.5623 134.094 85.3664 132.53 84.4318C129.32 82.5129 127.952 81.6956 126.134 80.9855C122.784 79.5762 119.118 79.0828 115.514 79.5557C109.929 80.3957 106.298 83.6891 103.874 85.8875C99.4132 89.9297 97.357 94.2683 95.908 97.3259C94.3842 100.504 93.2853 103.869 92.6398 107.334C92.107 110.437 91.9698 113.594 92.2313 116.73C92.4239 120.561 92.9563 124.367 93.8224 128.104C95.1495 133.309 96.581 138.307 98.255 139.699C96.841 139.37 95.4356 139.004 94.0402 138.602C88.4506 137.053 84.5806 135.948 80.2534 133.087C75.9262 130.226 73.9162 127.439 72.8998 125.733C71.7172 124.035 71.058 122.028 71.0037 119.959C70.9493 117.891 71.5021 115.851 72.5938 114.093C73.8795 111.533 75.4446 109.993 76.7062 108.752C76.873 108.587 77.0344 108.429 77.1892 108.273C78.9635 106.494 79.5872 105.46 81.118 102.923C81.9663 101.517 83.0932 99.6491 84.8488 96.937C86.0896 95.0212 90.0478 88.93 94.9594 82.537C98.4316 78.0178 101.765 73.714 106.908 68.7502L106.937 68.7226C110.567 65.2216 113.999 61.9124 119.47 58.639C123.99 55.992 128.829 53.9329 133.87 52.5118ZM227.384 112.936C227.369 112.918 227.354 112.901 227.34 112.886C227.209 112.735 227.171 112.691 227.317 112.866C227.34 112.889 227.362 112.913 227.384 112.936Z"
fill="#2C353D"
/>
<path
d="M124.78 108.171C125.27 106.098 127.231 104.29 127.232 104.29C126.736 103.813 126.193 103.386 125.612 103.017C124.776 102.636 123.847 102.511 122.94 102.657C121.533 102.738 120.183 103.236 119.059 104.087C117.331 105.41 116.106 107.283 115.587 109.397C114.955 111.6 114.955 113.935 115.587 116.138C116.141 118.095 117.117 119.908 118.446 121.448C119.748 123.177 121.515 124.499 123.541 125.258C125.567 126.018 127.768 126.184 129.885 125.738C131.526 125.441 133.111 124.89 134.583 124.104C136.917 122.997 137.303 122.339 137.442 122.064C137.922 121.109 137.73 120.144 137.442 118.796C137.147 117.186 136.521 115.656 135.604 114.302C134.866 113.246 134.539 112.673 134.539 112.673C133.822 113.333 133.011 113.882 132.132 114.302C131.002 114.783 129.742 114.868 128.557 114.542L128.455 114.509C127.372 114.135 126.439 113.419 125.8 112.469C125.596 112.171 124.285 110.273 124.78 108.171Z"
fill="#2C353D"
/>
<path
d="M175.7 108.171C175.211 106.098 173.249 104.29 173.249 104.29C173.745 103.813 174.287 103.387 174.866 103.017C175.702 102.636 176.632 102.511 177.539 102.657C178.946 102.738 180.296 103.236 181.42 104.087C183.148 105.41 184.373 107.283 184.892 109.397C185.524 111.599 185.524 113.935 184.892 116.138C184.338 118.095 183.362 119.908 182.032 121.448C180.731 123.177 178.964 124.499 176.938 125.259C174.912 126.018 172.711 126.184 170.594 125.738C168.952 125.441 167.367 124.89 165.896 124.104C163.562 122.997 163.175 122.339 163.037 122.064C162.557 121.109 162.749 120.144 163.037 118.796C163.332 117.186 163.958 115.656 164.875 114.302C165.612 113.246 165.939 112.673 165.939 112.673C166.656 113.333 167.468 113.882 168.347 114.302C169.477 114.783 170.737 114.868 171.921 114.542C171.966 114.528 172 114.516 172.024 114.509C173.107 114.135 174.039 113.419 174.679 112.469C174.884 112.171 176.195 110.273 175.7 108.171Z"
fill="#2C353D"
/>
</svg>
@@ -0,0 +1,22 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #327EFF / #FFDE2D / #FF6446 per Chroma's own logo SVG served by trychroma.com (chroma-wordmark.svg). -->
<svg {width} {height} viewBox="0 0 256 164" xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse fill="#FFDE2D" cx="170.666795" cy="81.9198362" rx="85.3332053" ry="81.9198362"
></ellipse>
<ellipse fill="#327EFF" cx="85.3332053" cy="81.9198362" rx="85.3332053" ry="81.9198362"
></ellipse>
<path
d="M170.666795,81.9199642 C170.666795,127.163394 132.461431,163.83916 85.3330773,163.83916 L85.3330773,81.9199642 L170.666795,81.9199642 Z M85.3332053,81.9198362 C85.3332053,36.6767906 123.538185,8.95998209e-05 170.666795,8.95998209e-05 L170.666795,81.9198362 L85.3332053,81.9198362 Z"
fill="#FF6446"
></path>
</g>
</svg>
@@ -1,12 +1,23 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#343434" xmlns="http://www.w3.org/2000/svg">
<path d="M8.963 12c0-1.584 1.284-2.855 2.855-2.855 1.572 0 2.856 1.284 2.856 2.855 0 1.572-1.284 2.856-2.856 2.856-1.57 0-2.855-1.284-2.855-2.856zm2.855-12C6.215 0 1.522 3.84.19 9.025c-.01.036-.01.07-.01.12 0 .313.252.576.575.576H5.59c.23 0 .433-.13.517-.333.997-2.16 3.18-3.672 5.712-3.672 3.466 0 6.286 2.82 6.286 6.287 0 3.47-2.82 6.29-6.29 6.29-2.53 0-4.714-1.5-5.71-3.673-.097-.19-.29-.336-.517-.336H.755c-.312 0-.575.253-.575.576 0 .037.014.072.014.12C1.514 20.16 6.214 24 11.818 24c6.624 0 12-5.375 12-12 0-6.623-5.376-12-12-12z"/>
<!-- #161616 / #FFFFFF per brand.circleci.com. Guidelines require Terminal (#161616) on light
backgrounds and White on dark, and forbid any color not named in them. -->
<svg
class="text-[#161616] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.963 12c0-1.584 1.284-2.855 2.855-2.855 1.572 0 2.856 1.284 2.856 2.855 0 1.572-1.284 2.856-2.856 2.856-1.57 0-2.855-1.284-2.855-2.856zm2.855-12C6.215 0 1.522 3.84.19 9.025c-.01.036-.01.07-.01.12 0 .313.252.576.575.576H5.59c.23 0 .433-.13.517-.333.997-2.16 3.18-3.672 5.712-3.672 3.466 0 6.286 2.82 6.286 6.287 0 3.47-2.82 6.29-6.29 6.29-2.53 0-4.714-1.5-5.71-3.673-.097-.19-.29-.336-.517-.336H.755c-.312 0-.575.253-.575.576 0 .037.014.072.014.12C1.514 20.16 6.214 24 11.818 24c6.624 0 12-5.375 12-12 0-6.623-5.376-12-12-12z"
/>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#1BA0D7" xmlns="http://www.w3.org/2000/svg">
<path d="M16.331 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.186 1.186 0 01-.806-.237 1.038 1.038 0 01-.352-.498 1.21 1.21 0 01-.023-.667c.052-.225.178-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.34 2.34 0 00-.903.206c-.287.132-.54.327-.739.571a2.221 2.221 0 00-.04 2.705c.295.378.709.645 1.175.756.491.12 1.006.102 1.487-.052l.082-.023M5.336 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.183 1.183 0 01-.806-.237 1.03 1.03 0 01-.351-.498 1.202 1.202 0 01-.024-.667c.052-.225.177-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.344 2.344 0 00-.903.206 2.08 2.08 0 00-.74.571 2.224 2.224 0 00-.041 2.705 2.11 2.11 0 001.176.756c.491.12 1.005.102 1.487-.052l.083-.023M9.26 17.249l-.004.957.07.012c.22.041.441.069.664.085.195.019.391.022.587.012.187-.014.372-.049.551-.104.21-.06.405-.163.571-.305a1.16 1.16 0 00.333-.478 1.31 1.31 0 00-.007-.96 1.068 1.068 0 00-.298-.414 1.261 1.261 0 00-.438-.255l-.722-.268a.388.388 0 01-.197-.188.245.245 0 01.008-.219.382.382 0 01.154-.142.798.798 0 01.257-.074c.153-.022.308-.021.46.005.18.02.358.051.533.096l.038.008v-.883l-.069-.015a4.749 4.749 0 00-.543-.097 2.844 2.844 0 00-.714-.003c-.3.027-.585.143-.821.33-.16.126-.281.293-.351.484-.104.29-.105.608 0 .899.054.145.14.274.252.381.097.093.207.173.327.236.157.084.324.149.497.195.057.017.114.035.17.054l.085.031.024.01c.084.03.162.078.226.14.045.042.08.094.101.151a.325.325 0 01.001.161.339.339 0 01-.166.198.856.856 0 01-.275.086 2.032 2.032 0 01-.427.021 5.208 5.208 0 01-.557-.074 9.195 9.195 0 01-.287-.067l-.033-.006zm-2.475.995h1.05v-4.167h-1.05v4.167zm12.162-2.936a1.095 1.095 0 011.541.158 1.094 1.094 0 01-.157 1.541l-.017.014a1.096 1.096 0 01-1.367-1.713m-1.525.854a2.193 2.193 0 002.666 2.107 2.139 2.139 0 00.701-3.937 2.207 2.207 0 00-3.367 1.83M22.961 10.728a.52.52 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M20.117 10.728a.522.522 0 001.041 0V8.139a.521.521 0 00-1.04 0v2.589M17.231 11.771a.521.521 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M14.393 10.728a.521.521 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M11.494 10.728a.522.522 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M8.624 10.728a.52.52 0 001.039 0V8.139a.52.52 0 00-1.039 0v2.589M5.737 11.771a.52.52 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M2.876 10.728a.522.522 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M0 10.728a.521.521 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155"/>
<!-- #00BCEB / #FFFFFF per cisco.com logo SVG and newsroom.cisco.com/logos. Cisco requires all parts of the mark be knocked out to white on dark backgrounds. -->
<svg
class="text-[#00BCEB] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.331 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.186 1.186 0 01-.806-.237 1.038 1.038 0 01-.352-.498 1.21 1.21 0 01-.023-.667c.052-.225.178-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.34 2.34 0 00-.903.206c-.287.132-.54.327-.739.571a2.221 2.221 0 00-.04 2.705c.295.378.709.645 1.175.756.491.12 1.006.102 1.487-.052l.082-.023M5.336 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.183 1.183 0 01-.806-.237 1.03 1.03 0 01-.351-.498 1.202 1.202 0 01-.024-.667c.052-.225.177-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.344 2.344 0 00-.903.206 2.08 2.08 0 00-.74.571 2.224 2.224 0 00-.041 2.705 2.11 2.11 0 001.176.756c.491.12 1.005.102 1.487-.052l.083-.023M9.26 17.249l-.004.957.07.012c.22.041.441.069.664.085.195.019.391.022.587.012.187-.014.372-.049.551-.104.21-.06.405-.163.571-.305a1.16 1.16 0 00.333-.478 1.31 1.31 0 00-.007-.96 1.068 1.068 0 00-.298-.414 1.261 1.261 0 00-.438-.255l-.722-.268a.388.388 0 01-.197-.188.245.245 0 01.008-.219.382.382 0 01.154-.142.798.798 0 01.257-.074c.153-.022.308-.021.46.005.18.02.358.051.533.096l.038.008v-.883l-.069-.015a4.749 4.749 0 00-.543-.097 2.844 2.844 0 00-.714-.003c-.3.027-.585.143-.821.33-.16.126-.281.293-.351.484-.104.29-.105.608 0 .899.054.145.14.274.252.381.097.093.207.173.327.236.157.084.324.149.497.195.057.017.114.035.17.054l.085.031.024.01c.084.03.162.078.226.14.045.042.08.094.101.151a.325.325 0 01.001.161.339.339 0 01-.166.198.856.856 0 01-.275.086 2.032 2.032 0 01-.427.021 5.208 5.208 0 01-.557-.074 9.195 9.195 0 01-.287-.067l-.033-.006zm-2.475.995h1.05v-4.167h-1.05v4.167zm12.162-2.936a1.095 1.095 0 011.541.158 1.094 1.094 0 01-.157 1.541l-.017.014a1.096 1.096 0 01-1.367-1.713m-1.525.854a2.193 2.193 0 002.666 2.107 2.139 2.139 0 00.701-3.937 2.207 2.207 0 00-3.367 1.83M22.961 10.728a.52.52 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M20.117 10.728a.522.522 0 001.041 0V8.139a.521.521 0 00-1.04 0v2.589M17.231 11.771a.521.521 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M14.393 10.728a.521.521 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M11.494 10.728a.522.522 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M8.624 10.728a.52.52 0 001.039 0V8.139a.52.52 0 00-1.039 0v2.589M5.737 11.771a.52.52 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M2.876 10.728a.522.522 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M0 10.728a.521.521 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155"
/>
</svg>
@@ -1,12 +1,13 @@
<script lang="ts">
interface Props {
height?: number;
width?: number;
height?: number
width?: number
}
let { height = 24, width = 24 }: Props = $props();
let { height = 24, width = 24 }: Props = $props()
</script>
<!-- #D97757 per https://claude.ai/favicon.svg (Anthropic's own asset). -->
<svg
viewBox="0 0 24 24"
width={`${width}px`}
@@ -1,12 +1,43 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #148CFC per clearbit.com/logo.svg. -->
<svg {width} {height} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f)"><path d="M27.9196 37H12.0804l-.6465-.005c-2.67455-.0434-3.73836-.3679-4.81023-.9411-1.15432-.6173-2.06024-1.5233-2.67758-2.6776l-.12785-.2479c-.5142-1.0387-.79606-2.185-.81698-4.8781L3 12.0804c0-3.15743.32876-4.30241.94609-5.45673.61734-1.15432 1.52326-2.06024 2.67758-2.67758l.24795-.12785c1.03866-.5142 2.185-.79606 4.87808-.81698L27.9196 3c3.1574 0 4.3024.32876 5.4567.94609 1.1543.61734 2.0603 1.52326 2.6776 2.67758l.1279.24795c.5142 1.03866.796 2.185.8169 4.87808L37 27.9196l-.005.6465c-.0434 2.6745-.3679 3.7384-.9411 4.8102-.6173 1.1543-1.5233 2.0603-2.6776 2.6776l-.2479.1279c-1.0802.5347-2.2769.8182-5.2088.8182Z" fill="#000" fill-opacity=".28"/></g><path d="M20 3h7.9196c3.1574 0 4.3024.32876 5.4567.94609 1.1543.61734 2.0603 1.52326 2.6776 2.67758.6173 1.15432.9461 2.2993.9461 5.45673V20H20V3Z" fill="#4DB1FD"/><path d="M12.0804 3H20v34h-7.9196c-3.15743 0-4.30241-.3288-5.45673-.9461-1.15432-.6173-2.06024-1.5233-2.67758-2.6776C3.32876 32.222 3 31.077 3 27.9196V12.0804c0-3.15743.32876-4.30241.94609-5.45673.61734-1.15432 1.52326-2.06024 2.67758-2.67758C7.77799 3.32876 8.92297 3 12.0804 3Z" fill="#148CFC"/><path d="M37 20v7.9196c0 3.1574-.3288 4.3024-.9461 5.4567-.6173 1.1543-1.5233 2.0603-2.6776 2.6776-1.1543.6173-2.2993.9461-5.4567.9461H20V20h17Z" fill="#DEF2FE"/><defs><filter id="filter0_f" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur"/></filter></defs>
<g filter="url(#filter0_f)"
><path
d="M27.9196 37H12.0804l-.6465-.005c-2.67455-.0434-3.73836-.3679-4.81023-.9411-1.15432-.6173-2.06024-1.5233-2.67758-2.6776l-.12785-.2479c-.5142-1.0387-.79606-2.185-.81698-4.8781L3 12.0804c0-3.15743.32876-4.30241.94609-5.45673.61734-1.15432 1.52326-2.06024 2.67758-2.67758l.24795-.12785c1.03866-.5142 2.185-.79606 4.87808-.81698L27.9196 3c3.1574 0 4.3024.32876 5.4567.94609 1.1543.61734 2.0603 1.52326 2.6776 2.67758l.1279.24795c.5142 1.03866.796 2.185.8169 4.87808L37 27.9196l-.005.6465c-.0434 2.6745-.3679 3.7384-.9411 4.8102-.6173 1.1543-1.5233 2.0603-2.6776 2.6776l-.2479.1279c-1.0802.5347-2.2769.8182-5.2088.8182Z"
fill="#000"
fill-opacity=".28"
/></g
><path
d="M20 3h7.9196c3.1574 0 4.3024.32876 5.4567.94609 1.1543.61734 2.0603 1.52326 2.6776 2.67758.6173 1.15432.9461 2.2993.9461 5.45673V20H20V3Z"
fill="#4DB1FD"
/><path
d="M12.0804 3H20v34h-7.9196c-3.15743 0-4.30241-.3288-5.45673-.9461-1.15432-.6173-2.06024-1.5233-2.67758-2.6776C3.32876 32.222 3 31.077 3 27.9196V12.0804c0-3.15743.32876-4.30241.94609-5.45673.61734-1.15432 1.52326-2.06024 2.67758-2.67758C7.77799 3.32876 8.92297 3 12.0804 3Z"
fill="#148CFC"
/><path
d="M37 20v7.9196c0 3.1574-.3288 4.3024-.9461 5.4567-.6173 1.1543-1.5233 2.0603-2.6776 2.6776-1.1543.6173-2.2993.9461-5.4567.9461H20V20h17Z"
fill="#DEF2FE"
/><defs
><filter
id="filter0_f"
x="0"
y="0"
width="40"
height="40"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/><feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur" /></filter
></defs
>
</svg>
@@ -1,12 +1,24 @@
<!-- #6C47FF / #BAB1FF per clerk.com/brand-assets (symbol-primary.svg). Same two-tone symbol on light and dark; the mono symbol-dark/symbol-light pair is Clerk's alternate for single-colour contexts. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#6C47FF" xmlns="http://www.w3.org/2000/svg">
<path d="m21.47 20.829-2.881-2.881a.572.572 0 0 0-.7-.084 6.854 6.854 0 0 1-7.081 0 .576.576 0 0 0-.7.084l-2.881 2.881a.576.576 0 0 0-.103.69.57.57 0 0 0 .166.186 12 12 0 0 0 14.113 0 .58.58 0 0 0 .239-.423.576.576 0 0 0-.172-.453Zm.002-17.668-2.88 2.88a.569.569 0 0 1-.701.084A6.857 6.857 0 0 0 8.724 8.08a6.862 6.862 0 0 0-1.222 3.692 6.86 6.86 0 0 0 .978 3.764.573.573 0 0 1-.083.699l-2.881 2.88a.567.567 0 0 1-.864-.063A11.993 11.993 0 0 1 6.771 2.7a11.99 11.99 0 0 1 14.637-.405.566.566 0 0 1 .232.418.57.57 0 0 1-.168.448Zm-7.118 12.261a3.427 3.427 0 1 0 0-6.854 3.427 3.427 0 0 0 0 6.854Z"/>
<svg {width} {height} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M99.5716 10.788C101.571 12.1272 101.742 14.9444 100.04 16.646L85.4244 31.2618C84.1035 32.5828 82.0542 32.7914 80.3915 31.9397C75.4752 29.421 69.9035 28 64 28C44.1177 28 28 44.1177 28 64C28 69.9035 29.421 75.4752 31.9397 80.3915C32.7914 82.0542 32.5828 84.1035 31.2618 85.4244L16.646 100.04C14.9444 101.742 12.1272 101.571 10.788 99.5716C3.97411 89.3989 0 77.1635 0 64C0 28.6538 28.6538 0 64 0C77.1635 0 89.3989 3.97411 99.5716 10.788Z"
fill="#BAB1FF"
/>
<path
d="M84 64C84 75.0457 75.0457 84 64 84C52.9543 84 44 75.0457 44 64C44 52.9543 52.9543 44 64 44C75.0457 44 84 52.9543 84 64Z"
fill="#6C47FF"
/>
<path
d="M100.04 111.354C101.742 113.056 101.571 115.873 99.5717 117.212C89.3989 124.026 77.1636 128 64 128C50.8364 128 38.6011 124.026 28.4283 117.212C26.4289 115.873 26.2581 113.056 27.9597 111.354L42.5755 96.7382C43.8965 95.4172 45.9457 95.2085 47.6084 96.0603C52.5248 98.579 58.0964 100 64 100C69.9036 100 75.4753 98.579 80.3916 96.0603C82.0543 95.2085 84.1036 95.4172 85.4245 96.7382L100.04 111.354Z"
fill="#6C47FF"
/>
</svg>
@@ -1,27 +1,36 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #161616 / #FFFFFF per clickhouse.design/brand/logo-usage (logomark, on-light / on-dark). Brand forbids recolouring the mark, so only its own published pair is used. -->
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
{width}
{height}
viewBox="0 0 168 168"
fill="none"
viewBox="27 24.5 100.1 100.1"
fill="currentColor"
class="text-[#161616] dark:text-[#FFFFFF]"
>
<path
d="M0 139.667H18.6667V158.333H0V139.667Z"
fill="#FF0000"
d="M27,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"
/>
<path
d="M0 9H18.6667V139.667H0V9ZM37.3333 9H56V158.333H37.3333V9ZM74.6667 9H93.3333V158.333H74.6667V9ZM112 9H130.667V158.333H112V9ZM149.333 69.6667H168V97.6667H149.333V69.6667Z"
fill="#FFCC00"
d="M49.2,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"
/>
</svg>
<path
d="M71.4,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"
/>
<path
d="M93.6,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"
/>
<path
d="M115.9,64.6c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v19.9c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2v-19.9Z"
/>
</svg>
@@ -1,10 +1,11 @@
<!-- #FF02F0→#F76808 / #6647F0→#0091FF per clickup.com/brand (v4 Logomark-gradient.svg); the gradient mark is the same on light and dark, and the guidelines say "don't change the color". -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
@@ -12,44 +13,44 @@
y="0px"
{width}
{height}
viewBox="0 0 168 168"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15 128.533L40.4652 108.979C53.9943 126.679 68.3685 134.838 84.3687 134.838C100.283 134.838 114.251 126.775 127.17 109.214L152.999 128.298C134.358 153.621 111.192 167 84.3687 167C57.6309 167 34.2405 153.706 15 128.533Z"
fill="url(#paint0_linear_308_323)"
d="M6.43828 50.2095C5.81176 49.4456 5.94882 48.3212 6.71918 47.7027L14.0169 41.8433C14.6535 41.3322 15.5841 41.4476 16.1032 42.0777C21.06 48.0956 26.32 50.8815 32.142 50.8815C37.9238 50.8815 43.0403 48.135 47.7801 42.1839C48.2888 41.5452 49.2172 41.4131 49.8629 41.9129L57.2604 47.6377C58.0415 48.2422 58.1989 49.3637 57.5855 50.1379C50.5775 58.9839 41.9971 63.6446 32.142 63.6446C22.3156 63.6446 13.6586 59.013 6.43828 50.2095Z"
fill="url(#clickup_paint0_linear)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M82.9336 43.5407L37.6076 82.693L16.6558 58.3354L83.0296 1L148.88 58.378L127.831 82.6503L82.9336 43.5407Z"
fill="url(#paint1_linear_308_323)"
d="M32.4953 17.1804C32.2202 16.9368 31.8067 16.9367 31.5314 17.1801L15.663 31.2116C15.0564 31.748 14.1285 31.6857 13.599 31.0731L7.40986 23.9122C6.88774 23.3082 6.95019 22.3961 7.54979 21.8688L31.0527 1.20062C31.6021 0.717503 32.4248 0.717611 32.9741 1.20088L56.4822 21.8847C57.0822 22.4125 57.1439 23.3256 56.6205 23.9294L50.4164 31.0866C49.8862 31.6982 48.9589 31.7594 48.353 31.2229L32.4953 17.1804Z"
fill="url(#clickup_paint1_linear)"
/>
<defs>
<linearGradient
id="paint0_linear_308_323"
x1="15"
y1="148.439"
x2="152.999"
y2="148.439"
id="clickup_paint0_linear"
x1="5.3335"
y1="32.1624"
x2="58.6653"
y2="32.1624"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#8930FD" />
<stop offset="1" stop-color="#49CCF9" />
<stop offset="0.225962" stop-color="#6647F0" />
<stop offset="0.793269" stop-color="#0091FF" />
</linearGradient>
<linearGradient
id="paint1_linear_308_323"
x1="16.6558"
y1="56.5595"
x2="148.88"
y2="56.5595"
id="clickup_paint1_linear"
x1="5.3335"
y1="31.6447"
x2="58.6653"
y2="31.6447"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF02F0" />
<stop offset="1" stop-color="#FFC800" />
<stop offset="0.778846" stop-color="#F76808" />
</linearGradient>
</defs>
</svg>
File diff suppressed because one or more lines are too long
@@ -1,12 +1,13 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #FF5F08 / #FF9910 per the logomark shipped on cloudflare.com, blog.cloudflare.com and workers.cloudflare.com. Cloudflare's logo guidelines forbid altering the colours or filling the flare, so the flare stays knocked out on both themes. -->
<svg
x="0px"
y="0px"
@@ -16,16 +17,12 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M151.503 82.5032L132.218 78.0264L128.775 76.6489L40.272 77.3377V120.039L151.503 120.384V82.5032Z"
fill="white"
/>
<path
d="M115.344 116.251C115.898 114.785 116.094 113.207 115.914 111.649C115.734 110.092 115.185 108.6 114.311 107.298C113.414 106.222 112.313 105.334 111.072 104.684C109.832 104.034 108.475 103.635 107.079 103.51L47.1593 102.821C46.8149 102.821 46.4706 102.476 46.1262 102.476C46.046 102.416 45.9809 102.338 45.9361 102.249C45.8912 102.159 45.8679 102.06 45.8679 101.96C45.8679 101.86 45.8912 101.761 45.9361 101.671C45.9809 101.582 46.046 101.504 46.1262 101.443C46.4706 100.755 46.8149 100.41 47.5037 100.41L107.768 99.7215C111.594 99.297 115.238 97.8608 118.325 95.5609C121.411 93.2609 123.83 90.1802 125.331 86.6355L128.775 77.682C128.775 77.3376 129.119 76.9932 128.775 76.6489C126.902 68.3097 122.359 60.8096 115.835 55.2884C109.311 49.7671 101.163 46.5264 92.6292 46.0588C84.0953 45.5912 75.642 47.9222 68.5538 52.6976C61.4656 57.473 56.1301 64.4318 53.3579 72.5164C49.7591 69.9462 45.3695 68.7268 40.9607 69.0727C36.9146 69.5239 33.1423 71.3378 30.2635 74.2166C27.3848 77.0953 25.5709 80.8676 25.1197 84.9137C24.8904 86.9847 25.0068 89.0795 25.4641 91.1123C18.9174 91.2933 12.6997 94.0214 8.1335 98.7162C3.56731 103.411 1.013 109.702 1.01391 116.251C0.957399 117.524 1.07323 118.798 1.35828 120.039C1.37409 120.308 1.48802 120.562 1.67844 120.752C1.86887 120.943 2.12255 121.057 2.39139 121.072H112.934C113.622 121.072 114.311 120.728 114.311 120.039L115.344 116.251Z"
fill="#F48120"
fill="#FF5F08"
/>
<path
d="M134.285 77.6818H132.563C132.219 77.6818 131.874 78.0261 131.53 78.3705L129.119 86.6353C128.565 88.102 128.37 89.68 128.55 91.2375C128.73 92.795 129.279 94.287 130.153 95.5889C131.05 96.6647 132.15 97.553 133.391 98.203C134.632 98.853 135.989 99.2519 137.384 99.377L150.126 100.066C150.47 100.066 150.815 100.41 151.159 100.41C151.239 100.47 151.304 100.548 151.349 100.638C151.394 100.728 151.417 100.826 151.417 100.927C151.417 101.027 151.394 101.126 151.349 101.215C151.304 101.305 151.239 101.383 151.159 101.443C150.815 102.132 150.47 102.476 149.782 102.476L136.696 103.165C132.87 103.59 129.226 105.026 126.139 107.326C123.052 109.626 120.634 112.706 119.133 116.251L118.444 119.35C118.1 119.695 118.444 120.383 119.133 120.383H164.589C164.73 120.404 164.873 120.391 165.007 120.346C165.142 120.301 165.264 120.225 165.364 120.125C165.465 120.025 165.54 119.903 165.585 119.768C165.63 119.634 165.643 119.491 165.623 119.35C166.442 116.433 166.905 113.426 167 110.397C166.945 101.737 163.481 93.4475 157.358 87.3241C151.234 81.2006 142.945 77.7363 134.285 77.6818Z"
fill="#FAAD3F"
fill="#FF9910"
/>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#3448C5" xmlns="http://www.w3.org/2000/svg">
<path d="M24 14.8598c0 2.1729-1.3757 3.974-3.5903 4.6996l-.0995.0318V17.989c1.3777-.5805 2.1869-1.7275 2.1869-3.1291-.0072-2-1.6087-3.6288-3.6082-3.6699h-.5964l-.1432-.5686c-.7025-2.8996-3.2886-4.9489-6.2721-4.97a6.3915 6.3915 0 0 0-5.811 3.664l-.1828.3757-.4175.0437a4.4311 4.4311 0 0 0-3.3052 2.088c-1.2803 2.0856-.6274 4.8143 1.4583 6.0947v1.6897h-.01l-.149-.0675a5.9402 5.9402 0 0 1-3.3658-4.3494c-.5787-3.2291 1.57-6.3161 4.7991-6.8948a7.8766 7.8766 0 0 1 6.9839-4.149c3.4724.025 6.535 2.28 7.5901 5.5883 2.5789.3366 4.5138 2.5245 4.5327 5.1251zm-15.3176-1.322h.5647a.0656.0656 0 0 0 .0457-.1113L7.084 11.2158l-.0007-.0007a.0656.0656 0 0 0-.0927.0007L4.78 13.4265a.0656.0656 0 0 0 .0477.1113h.5566a.0656.0656 0 0 1 .0657.0656v5.0574c0 .6588.534 1.1928 1.1928 1.1928H9.247a.0656.0656 0 0 0 .0457-.1113l-.33-.33a1.1928 1.1928 0 0 1-.348-.839v-4.97a.0676.0676 0 0 1 .0676-.0655zm9.769 2.5466h.5667a.0655.0655 0 0 0 .0457-.1133l-2.2107-2.2087-.0015-.0015a.0636.0636 0 0 0-.0899.0015L14.551 15.971a.0657.0657 0 0 0 .0457.1133h.5567a.0656.0656 0 0 1 .0656.0656v2.5108c0 .6588.534 1.1928 1.1928 1.1928h2.6063a.0655.0655 0 0 0 .0457-.1113l-.33-.33a1.1928 1.1928 0 0 1-.348-.839V16.15a.0656.0656 0 0 1 .0657-.0656zm-4.8844-1.2743h.5646a.0656.0656 0 0 0 .0477-.1114l-2.2107-2.2027-.0006-.0006a.0656.0656 0 0 0-.0928.0006l-2.2087 2.2068a.0656.0656 0 0 0 .0457.1113h.5626a.0676.0676 0 0 1 .0657.0676v3.7791c0 .6588.534 1.1928 1.1928 1.1928h2.5983a.0656.0656 0 0 0 .0477-.1113l-.332-.33a1.193 1.193 0 0 1-.346-.839v-3.6956c0-.0366.0291-.0665.0657-.0676z"/>
<!-- #3448C5 / #FFFFFF per cloudinary_logo_for_white_bg.svg and cloudinary_logo_for_black_bg.svg on cloudinary-res.cloudinary.com. Cloudinary Blue is reserved for the logo; no other recolouring is permitted. -->
<svg
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
class="text-[#3448C5] dark:text-[#FFFFFF]"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 14.8598c0 2.1729-1.3757 3.974-3.5903 4.6996l-.0995.0318V17.989c1.3777-.5805 2.1869-1.7275 2.1869-3.1291-.0072-2-1.6087-3.6288-3.6082-3.6699h-.5964l-.1432-.5686c-.7025-2.8996-3.2886-4.9489-6.2721-4.97a6.3915 6.3915 0 0 0-5.811 3.664l-.1828.3757-.4175.0437a4.4311 4.4311 0 0 0-3.3052 2.088c-1.2803 2.0856-.6274 4.8143 1.4583 6.0947v1.6897h-.01l-.149-.0675a5.9402 5.9402 0 0 1-3.3658-4.3494c-.5787-3.2291 1.57-6.3161 4.7991-6.8948a7.8766 7.8766 0 0 1 6.9839-4.149c3.4724.025 6.535 2.28 7.5901 5.5883 2.5789.3366 4.5138 2.5245 4.5327 5.1251zm-15.3176-1.322h.5647a.0656.0656 0 0 0 .0457-.1113L7.084 11.2158l-.0007-.0007a.0656.0656 0 0 0-.0927.0007L4.78 13.4265a.0656.0656 0 0 0 .0477.1113h.5566a.0656.0656 0 0 1 .0657.0656v5.0574c0 .6588.534 1.1928 1.1928 1.1928H9.247a.0656.0656 0 0 0 .0457-.1113l-.33-.33a1.1928 1.1928 0 0 1-.348-.839v-4.97a.0676.0676 0 0 1 .0676-.0655zm9.769 2.5466h.5667a.0655.0655 0 0 0 .0457-.1133l-2.2107-2.2087-.0015-.0015a.0636.0636 0 0 0-.0899.0015L14.551 15.971a.0657.0657 0 0 0 .0457.1133h.5567a.0656.0656 0 0 1 .0656.0656v2.5108c0 .6588.534 1.1928 1.1928 1.1928h2.6063a.0655.0655 0 0 0 .0457-.1113l-.33-.33a1.1928 1.1928 0 0 1-.348-.839V16.15a.0656.0656 0 0 1 .0657-.0656zm-4.8844-1.2743h.5646a.0656.0656 0 0 0 .0477-.1114l-2.2107-2.2027-.0006-.0006a.0656.0656 0 0 0-.0928.0006l-2.2087 2.2068a.0656.0656 0 0 0 .0457.1113h.5626a.0676.0676 0 0 1 .0657.0676v3.7791c0 .6588.534 1.1928 1.1928 1.1928h2.5983a.0656.0656 0 0 0 .0477-.1113l-.332-.33a1.193 1.193 0 0 1-.346-.839v-3.6956c0-.0366.0291-.0665.0657-.0676z"
/>
</svg>
@@ -1,12 +1,24 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#6933FF" xmlns="http://www.w3.org/2000/svg">
<path d="M17.645 16.155a13.013 13.013 0 0 0-4.479-13.287 11.617 11.617 0 0 1 5.815-1.546c.774 0 1.545.075 2.304.226l.32-1.282A13.092 13.092 0 0 0 18.98 0 12.93 12.93 0 0 0 12 2.03 12.933 12.933 0 0 0 5.021 0C4.139 0 3.26.089 2.396.266l.319 1.282a11.83 11.83 0 0 1 2.306-.226 11.64 11.64 0 0 1 5.817 1.544 13.01 13.01 0 0 0 .792 20.877l.375.257.373-.257c2.624-1.801 4.5-4.5 5.27-7.588zm-6.305 5.7A11.687 11.687 0 0 1 7.825 9.519a13.08 13.08 0 0 0 2.457 2.977 3.202 3.202 0 0 1 1.058 2.383zm.661-9.657a11.717 11.717 0 0 1-2.343-2.315 3.23 3.23 0 0 1 0-3.912 11.67 11.67 0 0 1 2.347-2.333c.9.671 1.697 1.468 2.37 2.366a3.197 3.197 0 0 1 0 3.832 11.816 11.816 0 0 1-2.374 2.362zm.659 9.657v-6.976a3.202 3.202 0 0 1 1.06-2.383 13.026 13.026 0 0 0 2.455-2.977 11.694 11.694 0 0 1-3.515 12.336Z"/>
<!-- #6933FF / #FFFFFF per cockroachlabs.com (electric-purple-500, also the CockroachDB docs
primaryColor) and the docs light/dark logo pair. The full-colour mark is a cyan-to-purple
gradient; Cockroach Labs reduces it to solid white on dark backgrounds. -->
<svg
class="text-[#6933FF] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.645 16.155a13.013 13.013 0 0 0-4.479-13.287 11.617 11.617 0 0 1 5.815-1.546c.774 0 1.545.075 2.304.226l.32-1.282A13.092 13.092 0 0 0 18.98 0 12.93 12.93 0 0 0 12 2.03 12.933 12.933 0 0 0 5.021 0C4.139 0 3.26.089 2.396.266l.319 1.282a11.83 11.83 0 0 1 2.306-.226 11.64 11.64 0 0 1 5.817 1.544 13.01 13.01 0 0 0 .792 20.877l.375.257.373-.257c2.624-1.801 4.5-4.5 5.27-7.588zm-6.305 5.7A11.687 11.687 0 0 1 7.825 9.519a13.08 13.08 0 0 0 2.457 2.977 3.202 3.202 0 0 1 1.058 2.383zm.661-9.657a11.717 11.717 0 0 1-2.343-2.315 3.23 3.23 0 0 1 0-3.912 11.67 11.67 0 0 1 2.347-2.333c.9.671 1.697 1.468 2.37 2.366a3.197 3.197 0 0 1 0 3.832 11.816 11.816 0 0 1-2.374 2.362zm.659 9.657v-6.976a3.202 3.202 0 0 1 1.06-2.383 13.026 13.026 0 0 0 2.455-2.977 11.694 11.694 0 0 1-3.515 12.336Z"
/>
</svg>
@@ -1,12 +1,15 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #F46A54 per Coda's own app icon, https://cdn.coda.io/icons/png/color/coda-192.png (single-colour mark, no dark variant published). -->
<svg {width} {height} viewBox="0 0 24 24" fill="#F46A54" xmlns="http://www.w3.org/2000/svg">
<path d="M21.194 0H2.806A2.01 2.01 0 0 0 .8 2v20c0 1.1.903 2 2.006 2h18.388a2.01 2.01 0 0 0 2.006-2v-.933c-.033-1.2-.067-3.7-.067-4.834 0-.633-.468-1.166-1.07-1.166-.668 0-1.103.4-1.437.733-1.003.9-2.508 1.067-3.812.833-.601-.133-1.17-.3-1.638-.6-1.438-.833-2.374-2.4-2.374-4.066 0-1.667.936-3.2 2.374-4.067.502-.3 1.07-.467 1.638-.6 1.27-.233 2.809-.067 3.812.833.367.334.802.734 1.437.734.602 0 1.07-.534 1.07-1.167 0-1.1.034-3.633.067-4.833V2c0-1.1-.903-2-2.006-2Z"/>
<path
d="M21.194 0H2.806A2.01 2.01 0 0 0 .8 2v20c0 1.1.903 2 2.006 2h18.388a2.01 2.01 0 0 0 2.006-2v-.933c-.033-1.2-.067-3.7-.067-4.834 0-.633-.468-1.166-1.07-1.166-.668 0-1.103.4-1.437.733-1.003.9-2.508 1.067-3.812.833-.601-.133-1.17-.3-1.638-.6-1.438-.833-2.374-2.4-2.374-4.066 0-1.667.936-3.2 2.374-4.067.502-.3 1.07-.467 1.638-.6 1.27-.233 2.809-.067 3.812.833.367.334.802.734 1.437.734.602 0 1.07-.534 1.07-1.167 0-1.1.034-3.633.067-4.833V2c0-1.1-.903-2-2.006-2Z"
/>
</svg>
@@ -0,0 +1,32 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #18103A on #D1E100 per codat.io (logo-white.svg glyph outlines, colours from the site palette);
framing matches their 300x300 favicon exactly. -->
<svg
{width}
{height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Codat"
>
<rect width="100" height="100" fill="#D1E100" />
<g transform="translate(15 14.504) scale(1.9464)" fill="#18103A">
<path
d="M10.4661 24.2454C7.15297 24.2454 4.45717 21.5498 4.45717 18.2366C4.45717 14.9235 7.15297 12.2274 10.4661 12.2274C12.2328 12.2274 13.8235 12.9941 14.9239 14.2119L17.4881 10.4824C15.63 8.79811 13.166 7.77026 10.4663 7.77026C4.69513 7.77026 0 12.4654 0 18.2366C0 24.0078 4.69493 28.7024 10.4661 28.7026C13.1658 28.7026 15.63 27.675 17.4884 25.9907L14.9241 22.2611C13.8237 23.4788 12.2328 24.2454 10.4661 24.2454Z"
/>
<path
d="M25.4976 12.2271C22.1842 12.2271 19.4884 14.9229 19.4884 18.2363C19.4884 21.5497 22.1844 24.2451 25.4976 24.2451V12.2271Z"
/>
<path
d="M25.4973 24.2454C28.8107 24.2454 31.5065 21.55 31.5065 18.2366C31.5065 14.9233 28.8107 12.2274 25.4973 12.2274V7.77026C31.2687 7.77026 35.9636 12.4654 35.9636 18.2366C35.9636 24.0081 31.2685 28.7026 25.4973 28.7026V24.2454Z"
/>
</g>
</svg>
@@ -1,21 +1,35 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- Fixed full-colour logomark: #355146 / #D18EE2 / #FF7759 per https://cohere.com/logo.svg. -->
<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3915_2196)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3615 19.053C11.2016 19.053 12.8726 19.0057 15.1823 18.0307C17.8739 16.8945 23.229 14.8318 27.0919 12.7132C29.7936 11.2314 30.9779 9.27159 30.9779 6.63236C30.978 2.96943 28.0819 0 24.5094 0H9.54127C4.40983 0 0.25 4.26514 0.25 9.52649C0.25 14.7878 4.14483 19.053 10.3615 19.053Z" fill="#355146"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8928 25.6161C12.8928 23.0371 14.4071 20.7118 16.7303 19.7231L21.4441 17.7173C26.2121 15.6884 31.46 19.281 31.46 24.5741C31.46 28.6749 28.2172 31.999 24.2176 31.9979L19.114 31.9965C15.6778 31.9956 12.8928 29.1392 12.8928 25.6161Z" fill="#D18EE2"/>
<path d="M5.60615 20.3047H5.60606C2.64799 20.3047 0.25 22.7634 0.25 25.7963V26.5076C0.25 29.5406 2.64799 31.9993 5.60606 31.9993H5.60615C8.56422 31.9993 10.9622 29.5406 10.9622 26.5076V25.7963C10.9622 22.7634 8.56422 20.3047 5.60615 20.3047Z" fill="#FF7759"/>
</g>
<defs>
<clipPath id="clip0_3915_2196">
<rect width="31.2099" height="32" fill="white" transform="translate(0.25)"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_3915_2196)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.3615 19.053C11.2016 19.053 12.8726 19.0057 15.1823 18.0307C17.8739 16.8945 23.229 14.8318 27.0919 12.7132C29.7936 11.2314 30.9779 9.27159 30.9779 6.63236C30.978 2.96943 28.0819 0 24.5094 0H9.54127C4.40983 0 0.25 4.26514 0.25 9.52649C0.25 14.7878 4.14483 19.053 10.3615 19.053Z"
fill="#355146"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.8928 25.6161C12.8928 23.0371 14.4071 20.7118 16.7303 19.7231L21.4441 17.7173C26.2121 15.6884 31.46 19.281 31.46 24.5741C31.46 28.6749 28.2172 31.999 24.2176 31.9979L19.114 31.9965C15.6778 31.9956 12.8928 29.1392 12.8928 25.6161Z"
fill="#D18EE2"
/>
<path
d="M5.60615 20.3047H5.60606C2.64799 20.3047 0.25 22.7634 0.25 25.7963V26.5076C0.25 29.5406 2.64799 31.9993 5.60606 31.9993H5.60615C8.56422 31.9993 10.9622 29.5406 10.9622 26.5076V25.7963C10.9622 22.7634 8.56422 20.3047 5.60615 20.3047Z"
fill="#FF7759"
/>
</g>
<defs>
<clipPath id="clip0_3915_2196">
<rect width="31.2099" height="32" fill="white" transform="translate(0.25)" />
</clipPath>
</defs>
</svg>
@@ -1,12 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20.738 14.341c-.419.265-.912.298-1.286.087-.476-.27-.738-.898-.738-1.774v-2.618c0-1.264-.5-2.164-1.336-2.407-1.416-.413-2.482 1.32-2.882 1.972l-2.498 4.05v-4.95c-.028-1.14-.398-1.821-1.1-2.027-.466-.135-1.161-.081-1.837.953l-5.597 8.987A9.875 9.875 0 0 1 2.326 12c0-5.414 4.339-9.818 9.672-9.818 5.332 0 9.67 4.404 9.67 9.818.004.018.002.034.003.053.05 1.049-.29 1.883-.933 2.29zm3.08-2.34-.001-.055C23.787 5.353 18.497 0 11.997 0 5.48 0 .177 5.383.177 12c0 6.616 5.303 12 11.82 12 2.991 0 5.846-1.137 8.037-3.2.435-.41.46-1.1.057-1.541a1.064 1.064 0 0 0-1.519-.059 9.56 9.56 0 0 1-6.574 2.618c-2.856 0-5.425-1.263-7.197-3.268l5.048-8.105v3.737c0 1.794.696 2.374 1.28 2.544.584.17 1.476.054 2.413-1.468.998-1.614 2.025-3.297 3.023-4.88v2.276c0 1.678.672 3.02 1.843 3.68 1.056.597 2.384.543 3.465-.14 1.312-.828 2.018-2.354 1.944-4.193z"/>
<!-- #000000 / #FFFFFF per coinmarketcap.com. -->
<svg
class="text-[#000000] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.738 14.341c-.419.265-.912.298-1.286.087-.476-.27-.738-.898-.738-1.774v-2.618c0-1.264-.5-2.164-1.336-2.407-1.416-.413-2.482 1.32-2.882 1.972l-2.498 4.05v-4.95c-.028-1.14-.398-1.821-1.1-2.027-.466-.135-1.161-.081-1.837.953l-5.597 8.987A9.875 9.875 0 0 1 2.326 12c0-5.414 4.339-9.818 9.672-9.818 5.332 0 9.67 4.404 9.67 9.818.004.018.002.034.003.053.05 1.049-.29 1.883-.933 2.29zm3.08-2.34-.001-.055C23.787 5.353 18.497 0 11.997 0 5.48 0 .177 5.383.177 12c0 6.616 5.303 12 11.82 12 2.991 0 5.846-1.137 8.037-3.2.435-.41.46-1.1.057-1.541a1.064 1.064 0 0 0-1.519-.059 9.56 9.56 0 0 1-6.574 2.618c-2.856 0-5.425-1.263-7.197-3.268l5.048-8.105v3.737c0 1.794.696 2.374 1.28 2.544.584.17 1.476.054 2.413-1.468.998-1.614 2.025-3.297 3.023-4.88v2.276c0 1.678.672 3.02 1.843 3.68 1.056.597 2.384.543 3.465-.14 1.312-.828 2.018-2.354 1.944-4.193z"
/>
</svg>
@@ -1,12 +1,23 @@
<!-- #0052FF / #FFFFFF per Coinbase's own light/dark logo files (mintcdn.com/coinbase-prod/.../logos/wordmark-light.svg and wordmark-dark.svg, served by docs.cdp.coinbase.com). Coinbase asks that the mark not be altered or recoloured, so only these two published variants are used. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#0052FF" xmlns="http://www.w3.org/2000/svg">
<path d="M4.844 11.053c-.872 0-1.553.662-1.553 1.548s.664 1.542 1.553 1.542c.889 0 1.564-.667 1.564-1.547 0-.875-.664-1.543-1.564-1.543zm.006 2.452c-.497 0-.86-.386-.86-.904 0-.523.357-.909.854-.909.502 0 .866.392.866.91 0 .517-.364.903-.86.903zm1.749-1.778h.433v2.36h.693V11.11H6.599zm-5.052-.035c.364 0 .653.224.762.558h.734c-.133-.713-.722-1.197-1.49-1.197-.872 0-1.553.662-1.553 1.548 0 .887.664 1.543 1.553 1.543.75 0 1.351-.484 1.484-1.203h-.728a.78.78 0 01-.756.564c-.502 0-.855-.386-.855-.904 0-.523.347-.909.85-.909zm18.215.622l-.508-.075c-.242-.035-.415-.115-.415-.305 0-.207.225-.31.53-.31.336 0 .55.143.595.379h.67c-.075-.599-.537-.95-1.247-.95-.733 0-1.218.375-1.218.904 0 .506.317.8.958.892l.508.075c.249.034.387.132.387.316 0 .236-.242.334-.577.334-.41 0-.641-.167-.676-.42h-.681c.064.581.52.99 1.35.99.757 0 1.26-.346 1.26-.938 0-.53-.364-.806-.936-.892zM7.378 9.885a.429.429 0 00-.444.437c0 .254.19.438.444.438a.429.429 0 00.445-.438.429.429 0 00-.445-.437zm10.167 2.245c0-.645-.392-1.076-1.224-1.076-.785 0-1.224.397-1.31 1.007h.687c.035-.236.22-.432.612-.432.352 0 .525.155.525.345 0 .248-.317.311-.71.351-.531.058-1.19.242-1.19.933 0 .535.4.88 1.034.88.497 0 .809-.207.965-.535.023.293.242.483.548.483h.404v-.616h-.34v-1.34zm-.68.748c0 .397-.347.69-.769.69-.26 0-.48-.11-.48-.34 0-.293.353-.373.676-.408.312-.028.485-.097.572-.23zm-3.679-1.825c-.386 0-.71.162-.94.432V9.856h-.693v4.23h.68v-.391c.232.282.56.449.953.449.832 0 1.461-.656 1.461-1.543 0-.886-.64-1.548-1.46-1.548zm-.103 2.452c-.497 0-.86-.386-.86-.904 0-.517.369-.909.865-.909.503 0 .855.386.855.91 0 .517-.364.903-.86.903zm-3.187-2.452c-.45 0-.745.184-.919.443v-.385H8.29v2.975h.693v-1.617c0-.455.289-.777.716-.777.398 0 .647.282.647.69v1.704h.692v-1.755c0-.748-.386-1.278-1.142-1.278zM24 12.503c0-.851-.624-1.45-1.46-1.45-.89 0-1.542.668-1.542 1.548 0 .927.698 1.543 1.553 1.543.722 0 1.287-.426 1.432-1.03h-.722c-.104.264-.358.414-.699.414-.445 0-.78-.276-.854-.76H24v-.264zm-2.252-.23c.11-.414.422-.615.78-.615.392 0 .693.224.762.615Z"/>
<svg
class="text-[#0052FF] dark:text-white"
{width}
{height}
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="M16.0301 24C11.6018 24 8.01503 20.42 8.01503 16C8.01503 11.58 11.6018 8 16.0301 8C19.9975 8 23.2903 10.8867 23.9249 14.6667H32C31.3187 6.45333 24.4325 0 16.0301 0C7.18013 0 0 7.16667 0 16C0 24.8333 7.18013 32 16.0301 32C24.4325 32 31.3187 25.5467 32 17.3333H23.9249C23.2903 21.1133 19.9975 24 16.0301 24Z"
/>
</svg>
@@ -0,0 +1,25 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #022199 per the CoMapeo Cloud mark shipped as public/favicon.svg in digidem/comapeo-cloud-app (the server this resource connects to). Awana Digital publishes no reversed variant, so dark mode uses the brand's own accent blue #0066FF from CoMapeoLogo.svg (digidem/comapeo-mobile); the navy is 1.3:1 on dark surfaces. -->
<svg
class="text-[#022199] dark:text-[#0066FF]"
{width}
{height}
viewBox="0 0 320 320"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="CoMapeo"
>
<path
transform="translate(0 51)"
d="M85.441 56.788c-24.612 0-47.25 11.693-55.445 36.277-1.252 3.756-2.063 8.036-2.445 11.964-.205 2.115.861 5.845-.193 7.719-.82 1.46-3.841 2.768-5.21 3.795-3.397 2.548-6.873 5.597-9.52 8.94-14.415 18.21-16.66 41.659-5.853 62.136 7.886 14.941 25.485 26.915 42.389 28.559 10.02.974 20.384.386 30.488.386h91.466c3.768 0 10.025 1.21 13.508-.193 4.357-1.755 10.108-8.577 6.818-13.315-2.27-3.269-6.635-4.645-10.292-5.66-20.403-5.668-41.696-6.673-62.135-12.35-6.45-1.792-17.796-6.02-16.98-14.408.415-4.272 4.97-7.567 8.49-9.327 9.063-4.532 19.525-5.869 29.33-7.912 3.645-.759 7.266-1.392 10.807-2.573 1.074-.358 3.406-.731 3.473-2.187.08-1.727-2.147-4.002-3.023-5.403-3.04-4.863-6.525-9.498-9.713-14.28-12.51-18.765-29.045-39.42-17.302-62.906 6.59-13.18 22.369-24.652 37.757-23.156 22.208 2.16 41.653 20.465 39.365 43.996-1.928 19.834-17.795 36.534-28.43 52.487-3.607 5.41-7.559 14.818-13.637 17.689-9.351 4.416-20.35 4.66-30.102 7.911-2.6.867-9.247 2.483-8.04 6.432.668 2.189 3.812 2.965 5.724 3.603 5.598 1.865 11.578 2.524 17.367 3.409 17.821 2.722 36.324 4.05 53.645 9.584 7.74 2.472 19.484 7.881 18.524 17.752-.42 4.325-3.025 7.202-5.017 10.807h30.489c9.851 0 19.949.563 29.717-.386 15.889-1.545 33.325-12.383 40.844-26.63 3.747-7.098 5.616-13.777 7.14-21.612 1.558-8.013-.442-16.64-2.573-24.314-2.574-9.265-9.796-18.293-17.238-24.185-2.572-2.035-9.178-4.324-10.613-7.075-1.302-2.495-.559-7.507-1.287-10.42-2.102-8.41-6.04-16.028-12.028-22.384-5.592-5.936-14.07-11.011-21.998-12.993-2.878-.72-5.932-1.387-8.877-1.673-1.16-.113-3.226.497-4.116-.45-1.189-1.264-1.345-4.468-1.801-6.11-1.196-4.307-2.884-8.817-4.953-12.736-9.364-17.743-23.522-31.9-42.388-39.237-32.94-12.81-72.355-2.368-93.718 26.115-4.893 6.524-11.75 15.913-12.414 24.314m74.1 5.917c-7.076 1.376-13.32 3.86-16.917 10.678-7.998 15.152 5.794 32.645 22.32 29.202 8.755-1.824 17.136-10.404 16.208-19.94-.993-10.215-9.898-22.217-21.612-19.94"
/>
</svg>
@@ -1,12 +1,17 @@
<!-- #1868DB tile, white mark, per Atlassian's @atlaskit/logo (atlassian.design logo library). Atlassian requires the logo be used without modification, and its brand appearance is identical in light and dark. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1 599.851 599.851 0 0 1-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382 1c1.039.49 3.105 1.467 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z"/>
<svg {width} {height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="#1868DB" d="M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z" />
<path
fill="#FFFFFF"
d="M17.888 14.461c-4.039-1.953-5.219-2.245-6.92-2.245-1.997 0-3.699.831-5.219 3.165l-.25.382c-.204.314-.249.426-.249.561s.068.247.318.404l2.564 1.594c.136.09.25.135.363.135.136 0 .226-.068.363-.27l.408-.628c.635-.966 1.203-1.28 1.928-1.28.636 0 1.385.18 2.315.629l2.677 1.257c.272.134.567.067.704-.247l1.27-2.783c.136-.315.046-.517-.272-.674M6.112 9.545c4.039 1.953 5.219 2.245 6.92 2.245 1.997 0 3.699-.83 5.219-3.165l.25-.381c.204-.315.249-.427.249-.562 0-.134-.068-.247-.318-.404L15.87 5.685c-.137-.09-.25-.135-.364-.135-.136 0-.226.067-.363.27l-.408.628c-.635.965-1.203 1.28-1.928 1.28-.636 0-1.385-.18-2.315-.63L7.814 5.843c-.272-.135-.567-.068-.703.247L5.84 8.872c-.136.314-.045.516.272.673"
/>
</svg>
@@ -1,12 +1,32 @@
<!-- #1773EB / #E44F20 / #FFDA00 per Contentful's Forma 36 design system (ContentfulLogoIcon). Same full-colour mark on light and dark. -->
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" fill="#2478CC" xmlns="http://www.w3.org/2000/svg">
<path d="M21.875 16.361c-.043-.048-1.067-1.18-2.365-1.19-.68 0-1.288.283-1.815.858-.773.842-2.35 1.85-4.25 1.921-1.598.059-3.085-.548-4.423-1.805-1.644-1.544-2.155-4.016-1.302-6.297.834-2.23 2.752-3.616 5.131-3.707l.044-.004c.024-.003 2.302-.258 4.325 1.548.17.185 1.154 1.197 2.475 1.228.823.018 1.586-.336 2.27-1.055.602-.632.87-1.342.797-2.112-.154-1.61-1.806-2.876-2.03-3.04-.212-.184-1.878-1.578-4.476-2.294-2.52-.695-6.42-.853-10.685 2.349a7.31 7.31 0 0 0-.557.49c-.28.208-.523.462-.716.753a12.469 12.469 0 0 0-3.064 8.677c.207 6.283 5.265 9.293 5.646 9.51.262.17 2.906 1.81 6.495 1.809 2.106 0 4.538-.565 7.005-2.322.248-.138 1.714-1.012 2.103-2.52.23-.894.042-1.815-.562-2.737l-.046-.06zm-16.932 1.97c0-1.09.887-1.977 1.977-1.977s1.977.886 1.977 1.977c0 1.09-.887 1.977-1.977 1.977s-1.977-.887-1.977-1.977zm.139-13.657c.236-.275.451-.498.628-.67a1.965 1.965 0 0 1 1.088-.329c1.09 0 1.977.887 1.977 1.977S7.888 7.63 6.798 7.63s-1.977-.887-1.977-1.977c0-.356.096-.69.261-.978zM13.249.999c3.954 0 6.657 2.336 6.826 2.486l.043.034c.42.3 1.532 1.301 1.63 2.324.044.469-.126.898-.52 1.313-.477.5-.983.752-1.504.738-.964-.019-1.743-.887-1.76-.905l-.042-.044c-2.292-2.063-4.83-1.855-5.13-1.822a6.82 6.82 0 0 0-3.012.818 3 3 0 0 0-2.34-3.214C9.543 1.45 11.516.999 13.248.999zM3.884 6.34a3 3 0 0 0 2.914 2.31c.122 0 .24-.01.358-.024a7.336 7.336 0 0 0-.39.866c-.75 2.003-.59 4.14.359 5.854-.068-.005-.136-.01-.205-.01a2.999 2.999 0 0 0-2.967 2.6 10.075 10.075 0 0 1-1.7-5.288 11.43 11.43 0 0 1 1.63-6.309zM21.497 18.9c-.3 1.174-1.615 1.89-1.627 1.896l-.058.036c-6.287 4.499-12.137.667-12.382.502l-.036-.022a2.848 2.848 0 0 1-.034-.02 2.998 2.998 0 0 0 2.543-3.228c1.124.64 2.336.951 3.58.906 2.214-.083 4.057-1.264 4.962-2.25.327-.356.67-.53 1.048-.53h.005c.762.004 1.46.688 1.593.826.421.658.558 1.291.406 1.884z"/>
<svg {width} {height} viewBox="2 2 24 24" xmlns="http://www.w3.org/2000/svg">
<path
fill="#1773EB"
d="M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"
/>
<path
fill="#E44F20"
d="M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"
/>
<path
fill="#FFDA00"
d="M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"
/>
<path
fill="#1773EB"
d="M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"
/>
<path
fill="#E44F20"
d="M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"
/>
</svg>
@@ -0,0 +1,28 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #000000 / #FFFFFF per contiguity.com/assets/icon-white.png and icon-black.png (docs.contiguity.com
likewise ships logo/black.svg for light and logo/white.svg for dark). The `>_` glyph is knocked out
to the opposite colour, so it carries its own fill- utilities. -->
<svg
class="text-[#000000] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 500 500"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M425 114.923V330.307C425 337.448 422.163 344.296 417.114 349.345C412.065 354.394 405.217 357.23 398.077 357.23H173.438L119.457 404.531C119.392 404.601 119.319 404.664 119.238 404.716C114.404 408.823 108.267 411.077 101.924 411.077C97.9738 411.07 94.0737 410.197 90.498 408.519C85.8472 406.375 81.9122 402.938 79.1638 398.617C76.4154 394.296 74.97 389.274 75.0005 384.153V114.923C75.0005 107.783 77.837 100.935 82.886 95.8856C87.9351 90.8365 94.7831 88 101.924 88H398.077C405.217 88 412.065 90.8365 417.114 95.8856C422.163 100.935 425 107.783 425 114.923Z"
/>
<path
class="fill-[#FFFFFF] dark:fill-[#000000]"
d="M196.727 231.364L112.182 265.227V236.591L166.045 217.955L165.136 219.318V216.136L166.045 217.5L112.182 198.864V170.227L196.727 204.091V231.364ZM288.801 265V287.273H209.938V265H288.801Z"
/>
</svg>
@@ -1,12 +1,24 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg {width} {height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="m3.5 11.633l-2.434 2.408V8.687a.53.53 0 0 0-.533-.527a.53.53 0 0 0-.533.527v6.624a.53.53 0 0 0 .532.526a.53.53 0 0 0 .377-.153l2.974-2.939l2.974 2.94a.535.535 0 0 0 .754 0a.52.52 0 0 0 0-.746l-2.974-2.938L7.61 9.06a.52.52 0 0 0 0-.745a.54.54 0 0 0-.753 0l-3.344 3.307q-.004.001-.007.005zm8.826 4.206a.53.53 0 0 1-.533-.526V8.688a.53.53 0 0 1 .533-.528a.53.53 0 0 1 .533.528v6.624a.53.53 0 0 1-.533.526zm7.257-6.624v6.098c0 .29.238.526.532.526a.53.53 0 0 0 .533-.526V9.215h2.818A.53.53 0 0 0 24 8.688a.53.53 0 0 0-.533-.527h-6.702a.53.53 0 0 0-.533.527a.53.53 0 0 0 .533.527h2.819z"/>
<!-- #1E1E1E soft black / #F2EFE9 warm white per kit.com/brand. ConvertKit rebranded to Kit in 2024. -->
<svg
class="text-[#1E1E1E] dark:text-[#F2EFE9]"
{width}
{height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g transform="translate(0 6.5802) scale(.0418514)">
<path
fill="currentColor"
d="M157.146 107.772C227.739 121.435 249.65 186.786 250.228 252.515C250.241 253.994 249.047 255.2 247.568 255.2H158.705C157.239 255.2 156.045 254.017 156.037 252.548C155.77 201.554 147.508 156.553 96.98 154.61C95.4726 154.553 94.2165 155.76 94.2165 157.27V252.541C94.2165 254.009 93.0251 255.2 91.5565 255.2H2.67549C1.20696 255.2 0.015564 254.012 0.015564 252.541V9.78761C0.015564 8.31908 1.20696 7.12768 2.67549 7.12768H91.5565C93.0251 7.12768 94.2165 8.31908 94.2165 9.78761V100.723C94.2165 102.072 95.3094 103.165 96.6588 103.165C97.7285 103.165 98.679 102.468 98.9898 101.443C121.885 26.4543 164.644 7.59906 234.076 7.13545C235.55 7.12509 236.757 8.32167 236.757 9.79538V100.505C236.757 101.973 235.566 103.165 234.097 103.165H157.591C156.307 103.165 155.265 104.206 155.265 105.491C155.265 106.604 156.055 107.563 157.146 107.772ZM400.471 164.618V105.825C400.471 104.356 401.662 103.165 403.131 103.165H468.536C469.823 103.165 470.867 102.121 470.867 100.834C470.867 99.7176 470.072 98.7619 468.977 98.5469C417.803 88.3967 394.18 58.938 393.364 9.7902C393.341 8.32944 394.514 7.12768 395.972 7.12768H492.012C493.481 7.12768 494.672 8.31908 494.672 9.78761V51.1914C494.672 52.6599 495.863 53.8513 497.332 53.8513H552.4C553.869 53.8513 555.06 55.0427 555.06 56.5112V100.505C555.06 101.973 553.869 103.165 552.4 103.165H497.332C495.863 103.165 494.672 104.356 494.672 105.825V153.248C494.672 170.002 504.944 175.527 518.604 175.527C540.01 175.527 561.126 165.882 569.595 161.51C571.367 160.596 573.473 161.883 573.473 163.874V237.7C573.473 239.671 572.385 241.484 570.639 242.403C562.279 246.801 536.43 258.995 506.86 258.995C446.047 259 400.471 234.209 400.471 164.618ZM275.452 252.541V105.82C275.452 104.351 276.643 103.16 278.112 103.16H366.993C368.461 103.16 369.653 104.351 369.653 105.82V252.541C369.653 254.009 368.461 255.2 366.993 255.2H278.112C276.643 255.2 275.452 254.012 275.452 252.541ZM270.419 45.2188C270.419 70.1916 288.055 90.4376 321.937 90.4376C355.819 90.4376 373.455 70.1916 373.455 45.2188C373.455 20.246 355.817 0 321.937 0C288.055 0 270.419 20.246 270.419 45.2188Z"
/>
</g>
</svg>
@@ -1,19 +1,22 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #1565C0 / #FFFFFF per the Coupa logo kit linked from coupa.com/company/press-kit, which
ships the mark in blue and a white reversed variant. -->
<svg
xmlns="http://www.w3.org/2000/svg"
role="img"
class="text-[#1565C0] dark:text-[#FFFFFF]"
{width}
{height}
viewBox="0 0 1561 1406"
style="fill:#1976d2;"
fill="currentColor"
>
<path
fill-rule="evenodd"
@@ -1,3 +1,4 @@
<!-- #663399 (rebeccapurple) per github.com/CSS-Next/logo.css (CC0), the official CSS logo endorsed by the W3C CSS WG. Small-size variant; the only per-theme variants published are mono black/white fallbacks, so the rebeccapurple tile is kept in both themes. -->
<script lang="ts">
interface Props {
height?: string
@@ -14,14 +15,19 @@
<svg
width={derivedWidth}
height={derivedHeight}
viewBox="0 0 32 32"
viewBox="0 0 1000 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="CSS"
>
<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#1172B8" />
<path d="M26 5H16V29.5L24 27L26 5Z" fill="#33AADD" />
<path
d="M19.5 17.5H9.5L9 14L17 11.5H9L8.5 8.5H24L23.5 12L17 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5Z"
fill="white"
fill="#639"
d="M0 0H840A160 160 0 0 1 1000 160V840A160 160 0 0 1 840 1000H160A160 160 0 0 1 0 840V0Z"
/>
<path
transform="scale(1.3) translate(-200 -200)"
fill="#fff"
d="m358.1,920c-64.23-.06-103.86-36.23-103.1-102.79,0,0,0-168.39,0-168.39,0-33.74,9.88-59.4,29.64-76.96,35.49-34.19,117.83-36.27,152.59.52,21.42,18.89,29.5,57.48,27.58,93.49h-73.72c.56-14.15-.19-35.58-8.51-43.65-10.81-14.63-39.36-12.91-46.91,2.32-4.64,8.26-6.96,20.49-6.96,36.67v146.18c0,30.65,10.65,46.15,31.96,46.49,9.96,0,17.53-3.62,22.68-10.85,7.19-8.58,8.31-27.58,7.73-41.32h73.72c5.04,70.07-36.32,119.16-106.71,118.29Zm234.04,0c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93,29.92,8.35,57.17,32.99,55.27,10.99,0,18.73-3.44,23.2-10.33,8.5-12.59,10.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48,11.34-137.4,31.18-36.92,112.61-38.62,143.82-.77,19.25,19.51,27.66,57.9,26.03,93.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59,0-29.38,11.71-29.38,35.12.21,24.86,9.9,35.06,32.48,45.45,29.24,11.36,66.42,30.76,79.9,54.24,40.2,71.54,12.62,180.82-86.09,176.65Zm224.76,0c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93,29.92,8.35,57.17,32.99,55.27,10.99,0,18.73-3.44,23.2-10.33,8.5-12.59,10.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48,11.34-137.4,31.18-36.92,112.61-38.62,143.82-.77,19.25,19.51,27.66,57.9,26.03,93.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59,0-29.38,11.71-29.38,35.12.21,24.86,9.9,35.06,32.48,45.45,29.24,11.36,66.42,30.76,79.9,54.24,40.2,71.54,12.62,180.82-86.09,176.65Z"
/>
</svg>
@@ -1,29 +1,59 @@
<script lang="ts">
interface Props {
height?: string;
width?: string;
}
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props();
let { height = '24px', width = '24px' }: Props = $props()
</script>
<!-- #45A2FF/#2660FF and #2994FF/#0033BF gradients per currencyapi.com/img/currencyapi_logo_color.svg. -->
<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="white"/>
<path d="M42 25.4897C42 28.2017 39.7997 30.402 37.0877 30.402H11.9225C9.21055 30.402 7.01025 28.2017 7.01025 25.4897C7.01025 22.7777 9.21055 20.5774 11.9225 20.5774H37.0877C39.7997 20.5774 42 22.7777 42 25.4897Z" fill="url(#paint0_linear_682_2)"/>
<path d="M37.1287 30.3713C39.8247 30.3713 42.0102 28.1858 42.0102 25.4897C42.0102 22.7937 39.8247 20.6082 37.1287 20.6082C34.4326 20.6082 32.2471 22.7937 32.2471 25.4897C32.2471 28.1858 34.4326 30.3713 37.1287 30.3713Z" fill="url(#paint1_linear_682_2)"/>
<path d="M36.924 33.155H24.5C20.2632 33.155 16.8348 29.7266 16.8348 25.4898C16.8348 21.2529 20.2632 17.8246 24.5 17.8246H36.9137C39.5336 17.8246 41.8158 15.8494 41.9898 13.2398C42.174 10.3743 39.9123 8 37.0877 8H24.5C14.8392 8 7 15.8392 7 25.5C7 35.1608 14.8392 43 24.5 43H37.0877C39.9123 43 42.174 40.6155 41.9898 37.7602C41.826 35.1301 39.5439 33.155 36.924 33.155Z" fill="url(#paint2_linear_682_2)"/>
<defs>
<linearGradient id="paint0_linear_682_2" x1="43.8572" y1="25.5613" x2="16.6571" y2="25.4606" gradientUnits="userSpaceOnUse">
<stop stop-color="#2994FF"/>
<stop offset="1" stop-color="#0033BF"/>
</linearGradient>
<linearGradient id="paint1_linear_682_2" x1="41.6178" y1="25.4595" x2="3.25451" y2="25.7176" gradientUnits="userSpaceOnUse">
<stop stop-color="#45A2FF"/>
<stop offset="1" stop-color="#2660FF"/>
</linearGradient>
<linearGradient id="paint2_linear_682_2" x1="39.3177" y1="25.5792" x2="9.38529" y2="25.302" gradientUnits="userSpaceOnUse">
<stop stop-color="#45A2FF"/>
<stop offset="1" stop-color="#2660FF"/>
</linearGradient>
</defs>
</svg>
<path
d="M42 25.4897C42 28.2017 39.7997 30.402 37.0877 30.402H11.9225C9.21055 30.402 7.01025 28.2017 7.01025 25.4897C7.01025 22.7777 9.21055 20.5774 11.9225 20.5774H37.0877C39.7997 20.5774 42 22.7777 42 25.4897Z"
fill="url(#paint0_linear_682_2)"
/>
<path
d="M37.1287 30.3713C39.8247 30.3713 42.0102 28.1858 42.0102 25.4897C42.0102 22.7937 39.8247 20.6082 37.1287 20.6082C34.4326 20.6082 32.2471 22.7937 32.2471 25.4897C32.2471 28.1858 34.4326 30.3713 37.1287 30.3713Z"
fill="url(#paint1_linear_682_2)"
/>
<path
d="M36.924 33.155H24.5C20.2632 33.155 16.8348 29.7266 16.8348 25.4898C16.8348 21.2529 20.2632 17.8246 24.5 17.8246H36.9137C39.5336 17.8246 41.8158 15.8494 41.9898 13.2398C42.174 10.3743 39.9123 8 37.0877 8H24.5C14.8392 8 7 15.8392 7 25.5C7 35.1608 14.8392 43 24.5 43H37.0877C39.9123 43 42.174 40.6155 41.9898 37.7602C41.826 35.1301 39.5439 33.155 36.924 33.155Z"
fill="url(#paint2_linear_682_2)"
/>
<defs>
<linearGradient
id="paint0_linear_682_2"
x1="43.8572"
y1="25.5613"
x2="16.6571"
y2="25.4606"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#2994FF" />
<stop offset="1" stop-color="#0033BF" />
</linearGradient>
<linearGradient
id="paint1_linear_682_2"
x1="41.6178"
y1="25.4595"
x2="3.25451"
y2="25.7176"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#45A2FF" />
<stop offset="1" stop-color="#2660FF" />
</linearGradient>
<linearGradient
id="paint2_linear_682_2"
x1="39.3177"
y1="25.5792"
x2="9.38529"
y2="25.302"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#45A2FF" />
<stop offset="1" stop-color="#2660FF" />
</linearGradient>
</defs>
</svg>
@@ -0,0 +1,27 @@
<script lang="ts">
interface Props {
height?: string
width?: string
}
let { height = '24px', width = '24px' }: Props = $props()
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
/>
<path d="M20 2v4" />
<path d="M22 4h-4" />
<circle cx="4" cy="20" r="2" />
</svg>

Some files were not shown because too many files have changed in this diff Show More