Add hexadecimal color code option for marker icon background

Is your feature request related to a problem? Please describe.

When adding a marker on a folium map such as:

fm = folium.Map(location=(44,3), tiles="Stamen Terrain")
folium.Marker(
        location=(44,3.2),
        popup="data1",
        icon=folium.Icon(color='#8000ff',icon_color='#4df3ce', icon="star", prefix="fa"),
    ).add_to(fm)
fm

It seems that the background icon color cannot be an hexadecimal color:

color argument of Icon should be one of: {'lightgray', 'pink', 'darkred', 'red', 'lightblue', 'darkblue', 'darkpurple', 'green', 'blue', 'lightgreen', 'lightred', 'gray', 'cadetblue', 'orange', 'purple', 'darkgreen', 'black', 'beige', 'white'}.

Is there an easy way to implement that functionality?

I am happy to work on a PR if someone can tell me where to start :-)

This feature is not implemented in folium, but uses this Leaflet plugin: https://github.com/python-visualization/Leaflet.awesome-markers (link is to a fork hosted on our organization). Found this issue on the original repo that may be interesting: lennardv2/Leaflet.awesome-markers#89

Thank you it seems that the PR is in the pipeline: lennardv2/Leaflet.awesome-markers#74

In case it helps someone else, I found a workaround adapting this stackoverflow answer:

import folium
from folium.features import DivIcon

def number_DivIcon(color,number):
    """ Create a 'numbered' icon
    
    """
    icon = DivIcon(
            icon_size=(150,36),
            icon_anchor=(14,40),
#             html='<div style="font-size: 18pt; align:center, color : black">' + '{:02d}'.format(num+1) + '</div>',
            html="""<span class="fa-stack " style="font-size: 12pt" >>
                    <!-- The icon that will wrap the number -->
                    <span class="fa fa-circle-o fa-stack-2x" style="color : {:s}"></span>
                    <!-- a strong element with the custom content, in this case a number -->
                    <strong class="fa-stack-1x">
                         {:02d}  
                    </strong>
                </span>""".format(color,number)
        )
    return icon

col_hex = ['#440154',
 '#481a6c',
 '#472f7d',
 '#414487',
 '#39568c',
 '#31688e',
 '#2a788e',
 '#23888e',
 '#1f988b',
 '#22a884',
 '#35b779',
 '#54c568',
 '#7ad151',
 '#a5db36',
 '#d2e21b']

num = 0
loc = (43.613, 3.888)

fm = folium.Map(location=loc, tiles="Stamen Terrain")
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon=folium.Icon(color='white',icon_color='white'),
        markerColor=col_hex[num],
    ).add_to(fm)
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon= number_DivIcon(col_hex[num],num+1)
    ).add_to(fm)

fm

which returns:

There's indeed a PR open on that repo that implements this: lennardv2/Leaflet.awesome-markers#74. I haven't tried it out though, so I don't know how well it works.

Since we are hosting our own fork of that package, we could implement it there: https://github.com/python-visualization/Leaflet.awesome-markers. If somebody wants to open a PR, that's welcome.

@Conengmo

Hi @Conengmo! I see this issue has been open for a bit. I am a beginner looking to make some meaningful open-source contributions, and I would love to take a swing at this!

If this is still open and relevant, I'd like to try porting the fix from lennardv2/Leaflet.awesome-markers#74 over to the python-visualization fork as you suggested. Let me know if I'm good to go ahead and start digging in!

Please go ahead. Contributions are greatly appreciated.

@hansthen

Hi @hansthen, thanks for the green light! Quick question: the python-visualization/Leaflet.awesome-markers link mentioned earlier in this thread is currently throwing a 404. Have the awesome-markers assets been vendored directly into the main folium repository since 2022? Just want to make sure I am targeting my PR at the right codebase!

It looks like it. This was before I joined the project. The awesome markers appear to be in map.py (class Icon). But if I look at the code, it also appears to support html color codes.

    icon_color : str, default 'white'
        The color of the drawing on the marker. You can use colors above,
        or an html color code.

Maybe this was implemented already.

@hansthen

@hansthen, thanks for looking into that! You are right that icon_color (the symbol inside supports HTML hex codes.
However, it looks like the color argument (the background of the marker itself) is still restricted to the hardcoded list of strings. If a user passes a hex code there, it currently throws a ValueError.
I'll dive into folium/map.py to look at the Icon class as you suggested, and see if I can implement the hex support for the background color argument. I'll also track down how the awesome-markers CSS is being loaded so I can port the necessary frontend logic!

@hansthen

Hi @hansthen ! Just wanted to loop back and let you know I've opened PR #2211 to fix this.
I ended up bypassing the CDN limitation by dynamically injecting the custom CSS from the Python wrapper whenever a hex color is passed. Let me know what you think when you have a chance to review it!
(Note: Since I'm a first-time contributor here, it looks like the GitHub Actions workflows are currently paused and just need a quick manual approval to run the tests). Thanks!

feat: support hexadecimal color codes for Icon marker backgrounds (#1466

Navigation Menu

Repository navigation

Add hexadecimal color code option for marker icon background #1466

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add hexadecimal color code option for marker icon background #1466

Description

Activity

Conengmo commented on Apr 8, 2021

lhoupert commented on Apr 8, 2021

lhoupert commented on Apr 13, 2021

Conengmo commented on Nov 18, 2022

dheerusri324 commented on Feb 24, 2026

hansthen commented on Feb 24, 2026

dheerusri324 commented on Feb 25, 2026

hansthen commented on Feb 25, 2026

dheerusri324 commented on Feb 26, 2026

dheerusri324 commented on Feb 28, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions