Content icons

<Stack spacing="5">
    <Card size="lg" variant="flat">
        <CardHeader>
            <Heading size="md">Content</Heading>
        </CardHeader>
        <CardBody as={SimpleGrid} columns={[1, null, 2, 3, 4]} spacing="6" pt="0">
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="orange">
                    <path d={mdiNewspaperVariantOutline} />
                </Icon>
                <Text>Article</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="red">
                    <path d={mdiMusicBoxOutline} />
                </Icon>
                <Text>Audio</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="orange">
                    <path d={mdiBullhornVariantOutline} />
                </Icon>
                <Text>Campaign</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="green">
                    <path d={mdiForumOutline} />
                </Icon>
                <Text>Chat</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="orange">
                    <path d={mdiToyBrickOutline} />
                </Icon>
                <Text>Component</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="teal">
                    <path d={mdiEmailOutline} />
                </Icon>
                <Text>Email</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="red">
                    <path d={mdiImageOutline} />
                </Icon>
                <Text>Image</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="red">
                    <path d={mdiFilePdfBox} />
                </Icon>
                <Text>PDF</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="orange">
                    <path d={mdiFilePowerpointBox} />
                </Icon>
                <Text>PowerPoint</Text>
            </HStack>
            <HStack>
                <Icon
                    layerStyle="icon.subtle"
                    boxSize="icon.md"
                    color="neutral"
                >
                    <path d={mdiFolderOutline} />
                </Icon>
                <Text>Project</Text>
            </HStack>
            <HStack>
                <Icon
                    layerStyle="icon.subtle"
                    boxSize="icon.md"
                    color="neutral"
                >
                    <path d={mdiLinkVariant} />
                </Icon>
                <Text>URL</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="red">
                    <path d={mdiPlayBoxOutline} />
                </Icon>
                <Text>Video</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="purple">
                    <path d={mdiGamepadCircleOutline} />
                </Icon>
                <Text>Workspace</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="blue">
                    <path d={mdiFileWordBox} />
                </Icon>
                <Text>Word</Text>
            </HStack>
        </CardBody>
    </Card>
    <Card size="lg" variant="flat">
        <CardHeader>
            <Heading size="md">Fields</Heading>
        </CardHeader>
        <CardBody as={SimpleGrid} columns={[1, null, 2, 3, 4]} spacing="6" pt="0">
            <HStack>
                <Icon
                    layerStyle="icon.subtle"
                    boxSize="icon.md"
                    color="neutral"
                >
                    <path d={mdiToggleSwitchOutline} />
                </Icon>
                <Text>Boolean</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="pink">
                    <path d={mdiCalendarClockOutline} />
                </Icon>
                <Text>Date and time</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="cyan">
                    <path d={mdiCodeJson} />
                </Icon>
                <Text>JSON</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="red">
                    <path d={mdiImageOutline} />
                </Icon>
                <Text>Media</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="blue">
                    <path d={mdiNumeric} />
                </Icon>
                <Text>Number</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="orange">
                    <path d={mdiVectorLink} />
                </Icon>
                <Text>Reference</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="purple">
                    <path d={mdiFormatFloatLeft} />
                </Icon>
                <Text>Rich text</Text>
            </HStack>
            <HStack>
                <Icon
                    layerStyle="icon.subtle"
                    boxSize="icon.md"
                    color="neutral"
                >
                    <path d={mdiFormatListChecks} />
                </Icon>
                <Text>Select</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="purple">
                    <path d={mdiTextShort} />
                </Icon>
                <Text>Text (short)</Text>
            </HStack>
            <HStack>
                <Icon layerStyle="icon.subtle" boxSize="icon.md" color="purple">
                    <path d={mdiText} />
                </Icon>
                <Text>Text (long)</Text>
            </HStack>
        </CardBody>
    </Card>
</Stack>