Xiaomi Miui V5 Icon Design Format Information

Discussion in 'MIUI News' started by MarkHUK, Apr 1, 2013.

Thread Status:
Not open for further replies.
  1. MarkHUK

    MarkHUKFounder & Sys Op
    Staff Member

    Hi everyone,

    After seeing a lot of people on the official chinese forum making V5 icons. I've just got to mention some very important points.

    1. The new icons are SQUARE at 136 x 136 pixels
    2. Designers do NOT need to make their icons with rounded corners
    3. MIUI handles the rounding process with a mask layer over the icon you design
    Example for com.miui.player.png from V5

    [​IMG]

    (taken from v5 rom)

    The new format means you, as a designer do not need to worry yourself with the finer detail of the corners of your icon, just make a 136 x 136 square and you're set!

    I suggest using Quick System Info to find process names of your apps, name your pngs the same as the process name. E.g. Dolphin Browser is mobi.mgeek.TunnyBrowser.png

    You can also download the official PSB file here for Photoshop, this includes official layer styles directly from Xiaomi's design team to MIUIAndroid.com

    Download PSB here

    Happy icon designing everyone!

    Thanks,

    Mark
     
    Pele, redmaner and grondinm like this.
  2. redmaner

    redmanertranslators.xiaomi.eu maintainer
    Staff Member

    Jan 12, 2013
    533
    547
    180
    Male
    The Netherlands
    Thanks! This very useful information!
     
  3. MarkHUK

    MarkHUKFounder & Sys Op
    Staff Member

    No problem, we will be elaborating on the processes and design layer styles later. :)
     
  4. redmaner

    redmanertranslators.xiaomi.eu maintainer
    Staff Member

    Jan 12, 2013
    533
    547
    180
    Male
    The Netherlands
    I have a question where is this icon overlay (to make them rounded) located?


    I made some icons and packed them in .mtz but when I apply the theme all icons are squared. I guess I missed something.
     
  5. ingbrzy

    ingbrzyXiaomi.eu Multilang leader
    Staff Member

    just place your icon into system/media/theme/miui_mod_icons and reapply default icon theme in theme manager...
     
    kartonick and redmaner like this.
  6. kartonick

    kartonickMembers

    May 2, 2012
    91
    6
    18
    Male
    And this way we can have both fancy icons and our own set of miui based icons at one time :)
     
  7. MarkHUK

    MarkHUKFounder & Sys Op
    Staff Member

    yes - make a theme with default and custom icons : )
     
  8. Sere83

    Sere83Members

    Mar 20, 2012
    172
    9
    28
    Male
    Do the new theme rules that come in to effect on May 1st mean we won't even be able to change a few icons manually (using this method of manually placing the PNG's in the folder), without creating a full theme and going through the theme store? Or is that only if they're packaged as .mtz?
     
  9. Stephen Brace

    Feb 29, 2012
    98
    18
    18
    Male
    What about if you don't want them to be square at all??? I was planning on making an icon pack with minimalistic shapes. I think the iphonesq rounded corner squares look too iphoney for my liking. (That's why i use android, cus i don't like iphone and ios!!!)
     
  10. kartonick

    kartonickMembers

    May 2, 2012
    91
    6
    18
    Male
    [​IMG]

    thanks for the sharing, making them is really easy now :)
     
  11. iBotPeaches

    iBotPeachesScript Gatekeeper

    Oct 31, 2011
    3,811
    1,115
    335
    Kansas
    I believe they are only rounded if you use the default miui_mod_icons folder, (which applies the rounding). Regular themes made I don't think get this forced onto them.
     
  12. Oschivo

    OschivoGuest

    How do i use the Facebook icon on the previous page?

    EDIT: Never mind, allready found out how to.

    Thnx in advance.

    Send from my GT-I9100 using Tapatalk
     
  13. palet

    paletMembers

    Feb 7, 2012
    12
    1
    13
    Untitled-1.jpg

    hi
    i save any icons on apple market.
    please rename icons.
    i dont now how match icons and apps
     

    Attached Files:

    iamfixyou likes this.
  14. iamfixyou

    iamfixyouMembers

    Mar 13, 2013
    21
    2
    13
    Male
    great..i just want to know how you get the icon from apple store?
    thanx

    Sent from my Galaxy Nexus using Tapatalk 2
     
  15. Treelz

    TreelzMembers

    Mar 14, 2011
    9
    1
    13
    How the hell do I get my own icons into that folder? I have tried to put them in there using Solid Explorer, but the .png file seems to be broken when I try to open it from icon folder, and they do not get applied. Does anyone have a suggestion to what I should do instead?
     
    sebasaga likes this.
  16. sebasaga

    sebasagaMembers

    Jun 16, 2012
    5
    1
    13
    Male
    I got the same question but a different error. Every time I try to paste or move the files I get the error "EROFS Read-only file system".
    How can I avoid that and paste the file without problems? Thank You!
     
  17. MarkHUK

    MarkHUKFounder & Sys Op
    Staff Member

    mount in r/rw :)
     
    sebasaga likes this.
  18. sebasaga

    sebasagaMembers

    Jun 16, 2012
    5
    1
    13
    Male
    Oh, sorry Mark, but I dont have much experience in this and I didn't understand what you mean :oops: . How can I do that? Thank You!
     
  19. redmaner

    redmanertranslators.xiaomi.eu maintainer
    Staff Member

    Jan 12, 2013
    533
    547
    180
    Male
    The Netherlands
    Which file-explorer are you using?
     
    sebasaga likes this.
  20. sebasaga

    sebasagaMembers

    Jun 16, 2012
    5
    1
    13
    Male
    On the phone: ES file explorer and SD maid
    On Windows: Droid explorer
     
  21. sebasaga

    sebasagaMembers

    Jun 16, 2012
    5
    1
    13
    Male
    Oh, sorry, I finally get it, there was an option in ES file explorer to mount R/RW...
    Thank you Mark and Redmaner!!
     
    MarkHUK likes this.
  22. flyologist

    flyologistMembers

    Jun 1, 2013
    3
    0
    11
  23. yama07

    yama07Members

    Sep 4, 2012
    50
    1
    18
    I'm using MIHOME from play but I have always square icons................. I tried to put 136x136 png on mtz but no work...........
    ?????Solution?
     

Share Our Site