DocsDocsPlaygroundPlayground (opens in a new tab)LearnLearn
    No results found.
GitHubGitHub (opens in a new tab)
    No results found.
All Docs
    • Background
    • Border
    • Display
    • Divide
    • Effects
    • Flex and Grid
    • Helpers
    • Interactivity
    • Layout
    • List
    • Outline
    • Sizing
    • Spacing
    • SVG
    • Tables
    • Transforms
    • Transitions
    • Typography
      • Getting Started
      • Why Panda?
      • FAQs
      • Browser Support
      • Roadmap
      • Changelog
      • CLI
      • PostCSS
      • Astro
      • Next.js
      • Remix
      • Gatsby
      • Ember
      • Redwood
      • Qwik
      • Vite
      • Vue
      • Nuxt
      • Preact
      • Solid.js
      • Svelte
      • Storybook
      • Cascade Layers
      • Writing Styles
      • Merging Styles
      • Template Literals
      • Conditional Styles
      • Responsive Design
      • Virtual Color
      • Patterns
      • Recipes
      • Slot Recipes
      • JSX Style Props
      • Color opacity modifier
      • Hooks
      • styled-system
      • The extend keyword
      • Stitches
      • Styled Components
      • Theme UI
      • Tokens
      • Token Usage
      • Text Styles
      • Layer Styles
      • Patterns
      • Conditions
      • Utilities
      • Presets
      • Theme
      • Config Functions
      • Background
      • Border
      • Display
      • Divide
      • Effects
      • Flex and Grid
      • Helpers
      • Interactivity
      • Layout
      • List
        • List Style Image
      • Outline
      • Sizing
      • Spacing
      • SVG
      • Tables
      • Transforms
      • Transitions
      • Typography
      • Minimal Setup
      • Component Library
      • Multiple Themes
      • Custom Fonts
      • Dynamic Styles
      • Static Generator
      • Debugging
      • CLI
      • Config
  • Playground (opens in a new tab)
  • Learn

On This Page

  • List Style Image
Question? Give us feedback → (opens in a new tab)Edit this page

Utilities

List

Panda provides utilities for customizing list styles.

List Style Image

Use a custom image as the list marker. It supports the assets token category.

panda.config.ts
const theme = {
  tokens: {
    assets: {
      star: {
        value: { type: 'svg', value: '<svg>...</svg>' }
      }
    }
  }
}
<div className={css({ listStyleImage: 'star' })} />
LayoutOutline

Copyright © 2024Proudly made by the Chakra team