Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

169
Views
How do you render SVGs using Chakra UI's Select components?

I'm trying to render different SVGs in each option component of Chakra UI's Select component but can't seem to display any images inside of the option component.

Both of the following implementations display [object Object] in the option.

import SVG from './file.svg'

// Also tried both of the following:
// import SVG from './file.tsx'
// import {ReactComponent as SVG} from './file.svg';

return (
    <Select>
      <option>
        <SVG />
      </option>
    </Select>
);
import SVG from './file.svg'

return (
    <Select>
      <option>
        <img src={SVG} alt=''/>
      </option>
    </Select>
);

The only way I was able to display SVG at all in Chakra's Select component was through the icon prop, but that would replace the dropdown icon which I do not want to do.

Let me know if there's any way I can break down or minimize the problem further.

Is there any way to customize my Select component to render SVGs with Chakra UI?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!