# Story behind redesigned NeetoRecord play button > See how we combined NeetoRecord’s R with a play icon to create a branded video play button, from early designs to the final version. - **Authors**: Kirti Gulati - **Published**: 2026-09-28 - **URL**: https://neeto.com/neeto/blog/story-behind-redesigned-neetorecord-play-button - **Page title**: Story behind redesigned NeetoRecord play button - **Meta description**: See how we combined NeetoRecord’s R with a play icon to create a branded video play button, from early designs to the final version. - **Keywords**: NeetoRecord, play button redesign, video player design, brand identity, and product design --- Every [NeetoRecord](https://www.neeto.com/neetorecord) recording starts with a thumbnail and a play button. For recordings on the free plan, the thumbnail also carries NeetoRecord’s branding. We wanted the play button to do two jobs: unmistakably say **play** , while also unmistakably say **NeetoRecord**. [![Before: the old thumbnail. A generic green play button, plus a "Made with NeetoRecord" pill sitting in the top-left corner.](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6IjY5N2RiZTRhLTQ0NzItNDkwZi1iODUwLWFmNjczZTRiMDU1ZCIsInB1ciI6ImJsb2JfaWQifX0=--1f1ae9fd9eb2beb7d3df6358d91a1a417040b990/neetorecord-play-icon-01-before-old-play-icon.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6IjY5N2RiZTRhLTQ0NzItNDkwZi1iODUwLWFmNjczZTRiMDU1ZCIsInB1ciI6ImJsb2JfaWQifX0=--1f1ae9fd9eb2beb7d3df6358d91a1a417040b990/neetorecord-play-icon-01-before-old-play-icon.png) **Before:** the old thumbnail. A generic green play button, plus a "Made with NeetoRecord" pill sitting in the top-left corner. The first ask was simple: could we get rid of the “Made with NeetoRecord” text and make the play button itself carry our identity? The triangle already says “play.” If we could somehow combine it with NeetoRecord’s R, the text would become redundant and we’d get that space on the thumbnail back. We discussed all of this asynchronously, using NeetoRecord to record short screen-share videos and NeetoPlanner to keep the thread in one place. Eight videos and a dozen Figma frames later, we had a new icon. ## Round one: Moving the branding The first set of designs kept the circular play button and experimented with where the branding should live. Some kept the text next to the play button; others moved it to the bottom of the thumbnail. We also tried a subtle dark overlay to improve readability on busy backgrounds. **Options 1a and 2a.** Left: the play button and the branding share one pill. Right: the branding moves to a bar at the bottom of the thumbnail. [![Options 1a and 2a. Left: the play button and the branding share one pill. Right: the branding moves to a bar at the bottom of the thumbnail.](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImMwN2RkMmNmLWUzNGUtNDQzNi05NzM4LWJhNTE3MTNkNDY3NSIsInB1ciI6ImJsb2JfaWQifX0=--d9c0be15d92437e73e81f0854cf98582c6f340d8/neetorecord-play-icon-02-round1-options-1a-2a.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImMwN2RkMmNmLWUzNGUtNDQzNi05NzM4LWJhNTE3MTNkNDY3NSIsInB1ciI6ImJsb2JfaWQifX0=--d9c0be15d92437e73e81f0854cf98582c6f340d8/neetorecord-play-icon-02-round1-options-1a-2a.png) **Options 1b and 2b:** the same two layouts with a subtle dark overlay, so the floating elements stay readable on busy backgrounds. [![Options 1b and 2b: the same two layouts with a subtle dark overlay, so the floating elements stay readable on busy backgrounds.](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImY2ZGZlYmJjLWI2ODctNDgwZi04Y2Y2LThlMDc5YTAwNTM2NSIsInB1ciI6ImJsb2JfaWQifX0=--63b63ea4f74dc39c0f75ed16b5abe113944976fb/neetorecord-play-icon-03-round1-options-1b-2b.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImY2ZGZlYmJjLWI2ODctNDgwZi04Y2Y2LThlMDc5YTAwNTM2NSIsInB1ciI6ImJsb2JfaWQifX0=--63b63ea4f74dc39c0f75ed16b5abe113944976fb/neetorecord-play-icon-03-round1-options-1b-2b.png) ## Round two: the R meets the triangle In the second round, we started combining the R and the play triangle in different ways. We tried putting the triangle inside the R, placing a circular play button over the R, and even making part of the R itself act as the play icon. **Options 1 and 2:** the play triangle tucked into the bowl of the R (left), and the full R mark with the triangle on its right (right). [![Options 1 and 2: the play triangle tucked into the bowl of the R (left), and the full R mark with the triangle on its right (right).](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImEzZDJmZjU4LWU5NTgtNDc2NS04N2E3LTUyNmI0ZDMyNWMwYyIsInB1ciI6ImJsb2JfaWQifX0=--87c9cfed168f72937fe00245075a7e9f2e957527/neetorecord-play-icon-04-round2-options-1-2.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImEzZDJmZjU4LWU5NTgtNDc2NS04N2E3LTUyNmI0ZDMyNWMwYyIsInB1ciI6ImJsb2JfaWQifX0=--87c9cfed168f72937fe00245075a7e9f2e957527/neetorecord-play-icon-04-round2-options-1-2.png) **Options 3 and 4:** a circular play button in front of the R, with the R as a faint shape behind it. [![Options 3 and 4: a circular play button in front of the R, with the R as a faint shape behind it.](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6IjljMTIyMTZkLWRhZWItNGJhYS04ZmNiLTIyNjQ4ZDgwY2I5MSIsInB1ciI6ImJsb2JfaWQifX0=--f418cfd39e5e6eae2053bbfa16226cbfd8fec1cb/neetorecord-play-icon-05-round2-options-3-4.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6IjljMTIyMTZkLWRhZWItNGJhYS04ZmNiLTIyNjQ4ZDgwY2I5MSIsInB1ciI6ImJsb2JfaWQifX0=--f418cfd39e5e6eae2053bbfa16226cbfd8fec1cb/neetorecord-play-icon-05-round2-options-3-4.png) This is where the direction got clearer. The circle had to go. Two elements were enough: the R and the play triangle. No circle, no ring, no text. ## A detour through Claude Design While waiting on the next round, we also tried a different tool for generating ideas: Claude Design. Claude Design generated six different directions. One of them, called **Counter R** , used the play triangle as part of the R itself rather than placing a play button on top of it. [![Claude Design, first pass: six marks built from geometric primitives, shown in vermilion and in ink, and at 32, 22 and 16 pixels.](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImI0MTVhNjUyLTY3NTktNGI4OC1iOWIzLTIwYWE0MTQ1MDQwOSIsInB1ciI6ImJsb2JfaWQifX0=--d703ae9aa3d226564b708189a5fb329953a64bac/neetorecord-play-icon-06-claude-design-first-pass-six-marks.png)](https://assets-cdn.neetopublish.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ImI0MTVhNjUyLTY3NTktNGI4OC1iOWIzLTIwYWE0MTQ1MDQwOSIsInB1ciI6ImJsb2JfaWQifX0=--d703ae9aa3d226564b708189a5fb329953a64bac/neetorecord-play-icon-06-claude-design-first-pass-six-marks.png) Claude Design, first pass: six marks built from geometric primitives, shown in vermilion and in ink, and at 32, 22 and 16 pixels. The second pass took Counter R and showed it six ways with green: solid green, a green tile, green play on an ink R, ink play on a green R, a green disc, and an ink tile. [![Claude Design, second pass: Counter R six ways with green. 2E, the green disc, is the one we took forward.](https://ik.imagekit.io/d9mvewbju/Publish/06-claude-turn2-six-ways-with-green_AUR6WcQ3D.png)](https://ik.imagekit.io/d9mvewbju/Publish/06-claude-turn2-six-ways-with-green_AUR6WcQ3D.png) Claude Design, second pass: Counter R six ways with green. 2E, the green disc, is the one we took forward. [![Claude Design also mocked 2E up in place: as the player’s centre button, as a corner watermark, and in a share-page header.](https://ik.imagekit.io/d9mvewbju/Publish/08-claude-2e-in-place_b4OjLFZPj.png)](https://ik.imagekit.io/d9mvewbju/Publish/08-claude-2e-in-place_b4OjLFZPj.png) Claude Design also mocked 2E up in place: as the player’s centre button, as a corner watermark, and in a share-page header. ## Round three: refining 2E and its cousins We shared 2E back with the designer, not as the answer but as a direction worth refining. **Option 9:** a translucent white R with the play triangle cut out of it. Elegant, but it disappears on a busy frame. [![neetorecord-play-icon-09-round3-option-9_6_HfJifDk.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-09-round3-option-9_6_HfJifDk.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-09-round3-option-9_6_HfJifDk.png) **Option 13 (left)** puts a large circular play button in front of the R, the closest to 2E. **Option 11 (right)** drops a small circular play button into the bowl of the R. [![neetorecord-play-icon-10-round3-options-13-11_9JrNzQTD5.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-10-round3-options-13-11_9JrNzQTD5.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-10-round3-options-13-11_9JrNzQTD5.png) **Option 14:** a green R with a dark triangle inside the bowl. [![neetorecord-play-icon-11-round3-option-14_e2TcHpIhV.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-11-round3-option-14_e2TcHpIhV.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-11-round3-option-14_e2TcHpIhV.png) **Option 10 (left):** a green R with a white triangle in the bowl, and nothing else. **Option 8 (right):** the same R with a dark triangle. [![neetorecord-play-icon-12-round3-options-10-8_934wpQUdD.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-12-round3-options-10-8_934wpQUdD.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-12-round3-options-10-8_934wpQUdD.png) **Option 17:** a heavier, more letter-like R. [![neetorecord-play-icon-13-round3-option-17_wSCnFLe2n.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-13-round3-option-17_wSCnFLe2n.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-13-round3-option-17_wSCnFLe2n.png) ## The final tweak Option 10 was the cleanest of the lot. It is just two shapes. The only worry was whether people would recognize it as an R at all, since our brand R is fairly abstract. The request was to give it a slightly more R-ish look without changing the logo. The last discussion related to this was short. The designer kept the existing brand R and adjusted only the corner radius so it sat more comfortably with the rest of the interface and felt more like a button. We tried a "real R" variant alongside it for comparison, and it looked like a different product. We recommended sticking with the brand icon and the minor tweak. **Option 10 (left) next to Option 10 - Tweak (right)**. The only change is the corner radius, which makes the R sit better with the rest of the interface. [![neetorecord-play-icon-14-final-tweak-option-10-vs-tweak_IYe9thD4z.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-14-final-tweak-option-10-vs-tweak_IYe9thD4z.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-14-final-tweak-option-10-vs-tweak_IYe9thD4z.png) That version **, "Option 10 - Tweak", is the one we shipped**. The final play icon, "Option 10 - Tweak", on a recording thumbnail. 🎉 [![neetorecord-play-icon-15-shipped-option-10-tweak_xEMDaqscf.png](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-15-shipped-option-10-tweak_xEMDaqscf.png)](https://ik.imagekit.io/d9mvewbju/Publish/neetorecord-play-icon-15-shipped-option-10-tweak_xEMDaqscf.png) ## Shipping it Shipping the new design required surprisingly little code. We replaced the old circular play button with the new R-shaped icon and made it inherit the player’s theme color. The play triangle stays white. Nothing else changed. The button behaves exactly as it did before. Viewers now see the NeetoRecord R where the generic play button used to be. [![image_y2F0ji9FUd.png](https://ik.imagekit.io/d9mvewbju/Publish/image_y2F0ji9FUd.png)](https://ik.imagekit.io/d9mvewbju/Publish/image_y2F0ji9FUd.png) The new play button in the live NeetoRecord player, shown over one of the recordings from this very discussion. Open any NeetoRecord recording and look at the play button. That little R is the whole story.