The plainest logo cloud: six Phosphor icon marks with names in a centred grid that runs to a single row on wide screens, with no heading or copy.
import {
BirdIcon,
CloudIcon,
FeatherIcon,
MoonIcon,
SquareIcon,
TreeIcon,
} from "@phosphor-icons/react/dist/ssr"
import { Logo, LogoGroup } from "@/components/editorial/logo"
import {
Section,
SectionContent,
} from "@/components/editorial/section"
// The copy: change text here, not in the markup.
const COPY = {
label: "Companies using Orbcore",
} as const
const LOGOS: {
name: string
icon: typeof BirdIcon
weight: "fill" | "bold"
}[] = [
{ name: "Chloe", icon: FeatherIcon, weight: "fill" },
{ name: "Diomira", icon: MoonIcon, weight: "fill" },
{ name: "Dorothea", icon: SquareIcon, weight: "fill" },
{ name: "Tamara", icon: BirdIcon, weight: "fill" },
{ name: "Zemrude", icon: CloudIcon, weight: "fill" },
{ name: "Anastasia", icon: TreeIcon, weight: "fill" },
]
export default function LogoCloud07() {
return (
<Section>
<SectionContent>
<LogoGroup aria-label={COPY.label}>
{LOGOS.map((logo) => (
<Logo key={logo.name}>
<logo.icon aria-hidden="true" weight={logo.weight} />
{logo.name}
</Logo>
))}
</LogoGroup>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/logo-cloud-07npx shadcn add @01orbital/logo-cloud-07yarn shadcn add @01orbital/logo-cloud-07bunx --bun shadcn add @01orbital/logo-cloud-07Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/logo-cloud/logo-cloud-07/index.tsx, as source you own and edit.
import LogoCloud07 from "@/components/blocks/logo-cloud/logo-cloud-07"
export default function Example() {
return <LogoCloud07 />
}npm: @phosphor-icons/react. The CLI installs them for you.
Registry pieces it installs with it:
Metal Tile Logo Cloud
Logo tiles on metal faces cycling silver, gold and graphite, each with its icon in a glass chip above the name, in a two to three column grid.
Mona Sans Wordmark Logo Cloud
Eight wordmarks set in Mona Sans, told apart by weight, width and tracking. Installs Mona Sans from Fontsource with its width axis.