Image Resources

Image resources, logos, and Post action marks for building a consistent X user experience in apps and websites that integrate Web Intents and embeds.

The resources are available to support a consistent user experience in applications leveraging Twitter & sites using Web Intents. It is recommended that you store these within your own application. For more information on using these marks, consult our Display Requirements.

X Logo

Download current X logo assets (including various sizes and colors) directly from the official brand toolkit.

Tweet Actions

A Tweet action represents a possible action on a Tweet with an “on” state if the viewer has already completed the action.

All Tweet actions are displayed with a medium grey (#AAB8C2) fill in their default state. All Tweet actions should set 50% opacity when the action is being activated by the viewer (e.g. :active CSS pseudo). The action retains the previous fill color during its pressed / activation state, switching to the “on” state after the action becomes activated.

Retweet and like actions appear in an “on” state if the current viewer has performed the action. A retweeted or favorited Tweet object property set to true communicates the expected “on” display state.

A retweet action is turned off if the current viewer matches the author of the Tweet. A turned off action has 30% opacity.

Reply

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 72">
  <path d="M41 31h-9V19c0-1.14-.647-2.183-1.668-2.688-1.022-.507-2.243-.39-3.15.302l-21 16C5.438 33.18 5 34.064 5 35s.437 1.82 1.182 2.387l21 16c.533.405 1.174.613 1.82.613.453 0 .908-.103 1.33-.312C31.354 53.183 32 52.14 32 51V39h9c5.514 0 10 4.486 10 10 0 2.21 1.79 4 4 4s4-1.79 4-4c0-9.925-8.075-18-18-18z"/>
</svg>

The reply icon opacity should be adjusted during icon activation. A reply Tweet action does not have an “on” state: a new reply is always available.

Reply Tweet action expected colors and opacity

Default	Pressed
#AAB8C2	50% opacity

Retweet

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72">
  <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z"/>
</svg>

The retweet icon opacity should be adjusted during icon activation. The retweet icon should appear in the “on” state if the Tweet object response for the current viewer has a retweeted property set to true. An inactive Tweet action state may exist when the current viewer is the same as the Tweet author.

Retweet Tweet action expected colors and opacity

Default	Pressed	Inactive	On & Hover
#AAB8C2	50% opacity	30% opacity	#19CF86

Like

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 72">
  <path d="M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z"/>
</svg>

The like icon opacity should be adjusted during icon activation. The like icon should appear in the “on” state if the Tweet object response for the current viewer has a favorited property set to true.

Like Tweet action expected colors and opacity

Default	Pressed	On & Hover
#AAB8C2	50% opacity	#E81C4F