[Tutorial] How To Use #WCCI# and #WCCT#

My hopes are that this will be a living post that I can update frequently please let me know your findings and I will test them out myself and update this post once I have verified.

I have yet to find a post that goes in depth on what WCCI and WCCT are and how to use them. So I am creating my own post in hopes to help others create weather icons for there watch faces.

First things first:
WCCI in not a weather icon, yes it is called Weather Current Condition Icon, which is misleading. Instead it is a variable that can be any of the following:
01 Fair
02 few clouds
03 scattered clouds
04 broken clouds
09 shower rain
10 rain
11 thunderstorm
13 snow
50 mist
The description to the right of the number IS NOT the WCCT Weather Current Condition Text. It is however an example of what it could be. For example I have seen the WCCI being 01 with WCCT being Sunny, Mostly Sunny, Fair, etc… I have NOT seen or know what all of these description can be.

Now since we have our base of information lets start creating watch faces with weather icons.

At this point you will need to download some sort of weather icon pack. You can download a bunch online for free by just googling it. I would obviously recommend png files so you can see through the white space.

Next selected the icons that you would like and visually map them out as to which one they should be on the above table.

Next add the element of picture to your watchface. Select the png or image file that you would like to use. Take note as to which one you are importing and watch WCCI (table) value it should be.

After you have it sized correctly and in the correct post, select the element. Then click on the little rocket ship in the lower yellow bar. This brings up the advanced settings menu.

Select transparency and enter the following:
Essentaily what this is stateing is the following. IF variable #WCCI# EQUALS 02 Set transparency to 100 ELSE Set transparency to 0.
This example would be for your icon that you choose to be the condition: partly cloudy etc… or WCCI 02

SPECIAL NOTES When WCCT is Cloudy it DOES NOT UPDATE WCCI to 04 (I do not know the reason behind this and have submitted a ticket to facer with no avail. So instead I did this for my Cloudy icon (transperency setting): $#WCCT#=Cloudy?100:0$
This only will work with WCCTs that DO NOT HAVE ANY SPACES

Proceed to do the rest of your icons with the codes referenced above.

If it is Cloudy and you use the following code:
Both your cloudy icon and fair icon will show up. You must modify the code so this does not happen.
This should correct this

If you would like your icon to change with the sunrise, sunset, or night you can set your transparency to check the time and display a night time icon if the weather is happening at night or a day time icon is the weather is happening during the day.
Here is my example for the WCCI variable 02
During the day:
Night am before sunrise:
Night pm after sunset:

I have run into the same issue with 01 and the WCCT Cloudy as above.
So I came up with the following code and it will work for the night am and night pm but will not work for during the day. I still need to submit a ticket on this, BUT if someone already knows please message me.
Here is my code:
During the day:
$#DH#<#WSUNSETH24#&&#DH#>=#WSUNRISEH#&&#WCCI#=01&&#WCCT#!=Cloudy?100:0$ (This code will NOT give me a value out)
Night am before sunrise:
$#DH#<#WSUNRISEH#&&#WCCI#=01&&#WCCT#!=Cloudy?100:0$ (This code works)
Night pm after sunset:
$#DH#>=#WSUNSETH24#&&#WCCI#=01&&#WCCT#!=Cloudy?100:0$ (This code works)

Hope this helps everyone I know it took me a while to figure this all out. If you know of better ways to do this please message me or post on this topic.



Jason, thanks for that info, a huge help. Something I’m not understanding though is HOW to add them in. When you go to add the element in, is it a custom one or basic weather or what? Thanks in advance.

There’s also a “Smoke” condition - but that’s also Icon #50

First off, big big thanks to @JasonD! Helped me a lot knowing those codes.

Now to your question, @ragoetz. You add these as formulas for transparency for certain layers that you only want to see during a given weather condition. For example, if you want to see a layer that shows stars in a clear sky, you’d add this code to the Transparency field: $#WCCI#=01&&#DISDAYTIME#==false?100:0$ meaning if the weather is “Fair” a.k.a. Clear and it is not daytime, show this layer, otherwise hide it.

Hope this helps! If you need more help, let me know :wink:

1 Like

I believe that I did. Add Element -> Essentials -> Center Point.
You can then change the image by choosing upload image. This is were you use your weather icon pngs.

Then select the element and click on the rocketship for the advanced settings.

Hopefully this gets you down the correct path.


I often see this post quoted as an answer to all those who have troubles with weather icons.
The thing I don’t understand is why are there weather icons available on facer if they don’t work and we have to go through this procedure?

I designed 2 faces that use weather icons :

I found out the icons would sometimes show, sometimes not.
So I updated my designs with advices found here, but I think it’s an heavy procedure, I don’t see how multiplying layers like that could be anything else than tinkering.
BTW the conditional with #WCCI# seems to need 2 equal signs… weird

Guys @Facer_official … can you update on the good practice for displaying weather icons.


1 Like

You’re right about the need to use == in conditionals, @elv3n12. This is documented at Conditionals | Facer Documentation. @JasonD still needs to edit the original post to reflect that.

Building a custom weather icon rotation allows creators to have total control over which icons show under different conditions. For example, if it bothers you to see a blazing sun for clear conditions in the middle of the night, you can go through this layering process to customize with a crescent moon.

I understand that well.
But it does not answer my question about why the item called Weather Icon doesn’t display a weather icon.
(at least a default one).

The built-in Weather Icons complication displays a rotation of monochromatic weather silhouettes. It’s functional, but not necessarily “ideal.” If it is not working at all for you, could you please provide more information about the behavior you’re seeing?

I placed the item ‘weather Icon’ on my design, saw a cloud, thought it was working alright.
I published the watch, and after a few moments (maybe 30min), the design was showing an empty spot where the icon was placed.
That’s why I read this post and followed instructions to replace my defective weather icon. And yet, I still have no way to test if the icon displays according to real weather conditions.

Ohhh… This probably calls for a separate [BUG] report thread (to maximize eyeballs).

What model of watch are you seeing the Weather Icons disappear on?

And what model of phone are you Bluetooth pairing with?

U might find it funny but I own an iPhone and an Apple watch, therefore I can never test my design on a real watch.
I’ve noticed that I’m apparently not the only one having trouble with clouds : https://www.facer.io/watchface/MbU4ZUG1DT The preview shows a cloud but when u ‘play’ the design, you only see the temp in that spot.
The Watch case I chose to present my design on Facer was a Huawei Watch 2… if that helps.

Thanks so much, @elv3n12!

I just synced a few of my own watch faces to check on their default Weather Icons. I’m happy to report that they are working as intended on my actual Huawei Watch 2176, as well as in Facer Android preview-and-plays.

But you’re absolutely right that the default Weather Icons have gone missing in web previews.
This bug is relatively recent and confined to web previews. See below. @Facer_Official @Gavin

Thanks for letting us know about the weather icons, we’ll get this to the dev team right away.


$#WCCI#=02?100:0$, this works great for current weather, but shouldn’t it be, $#WFACI#=02?100:0$, for forecast (day 1)?
I have plugged in the first and it works great to show the current condition, but I can’t seem to get forecast icons to show up.

The forecast icon’s don’t show up because for some reason facer only put the icons into the current conditions. Future conditions will display as a number & you have to manually add an icon for each possible condition in it’s own layer & use a conditional to set the transparency to show just the condition that matches.

The thing is I can’t figure out why they didn’t set up the future conditions in the same way they set up the current conditions. I get that some people may want to put in custom icons for night time etc. But that functionality appears to be there in the current conditions as well. You can as far as I can tell replace their icons quite simply by uploading a new icon in it’s place.

Setting up night forecast would be as simple as opening 2 weather conditions elements & replacing the daytime icons with nighttime icons in one of them. Even if you wanted to use your own daytime icons it would still be all in 2 layers & compleetly customized. So 2 layers per day of forecast, as opposed to 9 layers for the night options & 9 more layers for the day options. God forbid you want to put more than one days forecast in.

I got a code 16. Any ideas on what condition that could be?

There can’t be such a code, all the codes are specified in the API OpenWeather Weather Conditions - OpenWeatherMap


I understand this well, if I want to use this set of icons, see the attachment, so I have to insert each image separately as an image and then I have to create a TAG with the appropriate code for each image?
I’m a lama and a beginner, and I don’t speak English, so I go all through google translator and it’s inaccurate.
Would someone experienced be so willing and be able to make a table for an icon set with codes, where it would be enough to just copy the code? Possible?
Thank you for answer.

or AccuWeather APIs | Weather Icons

Add Element
Select Weather Icons
In the weather icons’ Image Properties, delete the stock image by clicking the ‘X’ in the upper right (see attached)
Click the ‘+’ and upload your own icon. Do this for each weather condition

This will allow custom icons without the use of code. This only works for today’s weather; if you want a forecast image you can come back here and ask for help with code


1 Like