Ubicacion logo azul
How to recolor a location pin logo to blue, white or green: what changes in a vector file, when each color fits, and checks before you use it.
Contents
The short answer
A search for a blue "ubicación" logo usually refers to a location icon. This is the familiar map pin, a teardrop shape with a circle at its center, shown in blue. The same question applies to white and green versions of the pin. The supplied material does not identify any specific brand's official location logo or confirmed color values. This guide therefore treats the pin as a generic icon. If you need a particular company's pin, use the asset and color guidelines published by its owner.
In practical terms, a true vector version of the pin makes recoloring a fill edit. You select the pin shape, assign the new color and leave the geometry unchanged. If you only have a raster image such as a PNG or JPG, you can still recolor it, but edge quality and flexibility are limited. Which color to choose depends mainly on the background the icon will sit on.
What you are actually recoloring
Before you change any color, look at how the pin is built. Two pins can look identical on screen but behave very differently when recolored.
- Pin body: the outer teardrop shape. This is usually the main element you change to blue, white or green.
- Center circle: this may be a true cutout, where the background shows through, or a separate shape filled with a color, often white. This difference matters most when the body is changed to white.
- Outline or stroke: some pins have a border defined as a stroke rather than a fill. Strokes need to be recolored separately.
- Shadow, highlight or gradient: extra layers or gradient stops each carry their own color. A single fill change will not update them.
Blue, white or green: choosing by situation
The notes below are editorial guidance based on general design practice. They are not documented rules for any specific logo.
| Version | Typical situation | What to watch |
| Blue | Light or white backgrounds; maps, directions and contact sections | Check that the shade has enough contrast and matches the rest of your palette |
| White | Dark, colored or photographic backgrounds | If the center circle is a white shape rather than a cutout, the pin turns into a solid blob; recolor or knock out the circle |
| Green | Contexts where green already carries meaning in your interface or brand, such as availability or confirmation | Light greens can lose contrast on white; avoid relying on green alone to communicate status |
How to change the color in a vector file
- Open the file in a vector editor and view it in outline mode to confirm it contains paths, not an embedded image.
- Ungroup or isolate the pin so you can select the body by itself.
- Set the fill of the body to the blue, white or green value from your palette.
- Check the center circle: confirm it is a cutout, or recolor it so it stays visible against the new body color.
- Recolor any strokes, gradient stops, shadows or highlights that should change with the body.
- Save each color as a separate named version, and export the formats you need, such as SVG for the web and PDF or EPS for print workflows.
In SVG code, the color usually sits in a fill attribute or a CSS rule. Changing that value recolors the shape. Setting the fill to currentColor makes the icon inherit the text color of its surrounding element, so one file can appear blue, white or green depending on where it is placed.
<!-- before -->
<path class="pin-body" d="…" fill="#000000"/>
<!-- after: replace with the value from your palette -->
<path class="pin-body" d="…" fill="YOUR_COLOR"/>
<!-- or inherit the surrounding text color -->
<path class="pin-body" d="…" fill="currentColor"/>If you only have a PNG or JPG
A raster pin can be recolored with a selection and fill, or with a color overlay in an image editor. Smoothed edge pixels often keep traces of the old color. This shows up as a visible fringe, especially when a dark pin is turned white. JPGs also have no transparency, so the background comes along with the icon. A file's extension alone does not prove clean vector geometry. An SVG or AI file can contain an embedded bitmap, so inspect the paths before you assume the icon will scale and recolor cleanly.
Checks before using the recolored icon
- Contrast: the WCAG 2.1 guideline for non-text graphics asks for a contrast ratio of at least 3:1 against adjacent colors. Test each version against its real background.
- Small sizes: view the pin at the size it will actually appear, so you can confirm the center circle is still readable.
- Consistency: keep the shape identical across the blue, white and green versions, so that only the color changes.
- Rights: being able to download a pin icon does not mean you may reuse or alter it. Check the icon's license. If the pin belongs to a brand, check that brand's guidelines, which may restrict recoloring.
What this guide cannot confirm
No confirmed evidence was supplied about a specific location logo. There are no official blue, white or green color codes, no file specifications and no version history. Any exact color values, and any judgment about whether a particular brand's pin may be recolored, need to come from the owner's own brand materials.