Star in Circleの無料アイコン | フリー素材

Conveying “Favorite” intuitively, “Star with Round Frame” Free Material

Illustration icon where standard pentagram is balanced inside circular frame. Star mark means “Important” or “Brilliance” even alone, but by enclosing in round frame, it becomes easy to be recognized as “clickable button” on website or app, having effect of increasing user visibility and operability.

Specific Usage Scenes and Suggestions

This icon functions as important part urging user action in UI design of Web services and apps.

• For “Register Button” of Favorite / Bookmark
  Standardly used as button indicating functions “Watch later” or “Add to favorites” on EC site product pages or blog article headers. Round frame makes it easy to express switching between unclicked state (e.g. gray frame only) and clicked state (yellow filled state), conveying current status clearly to user.
• As “Recommend Mark” of Review / Evaluation
  Can be used as badge indicating special recommendation like “Editor’s Choice” or “Hall of Fame Item” apart from 5-level evaluation stars in review sites and product reviews. Round shape gives trust like “Certified Seal,” emphasizing it is item particularly noteworthy among many products.
• For “Eye-catch” of Important Notice / Point
  In itemized list design, place this round star icon at head of line indicating particularly important items or merits. Attracts line of sight more than simple black dot (・), functioning as accent emphasizing “Here is key point!” calling reader’s attention.
• As “Rank Display” of Ranking / Award History
  As icon indicating 1st place in popularity ranking or award history like “Best Cosmetic Award.” Like crown icon, used as symbol symbolizing “Number One” or “Being Special,” useful for appealing authority and high popularity.
• For “Like / Reaction” Button of SNS
  Heart mark is mainstream for “Like” button, but star mark may be used depending on service. Especially in business SNS or sites handling intellectual content, star icon with strong implication of evaluation and bookmark is preferred over emotional heart, making it optimal as UI button in that case.

Design Tips and Benefits of SVG Format

Free materials distributed on this site also provide vector format (SVG file) where image does not deteriorate for free.

For this icon, state change design is important. With SVG editing software (Illustrator etc.), interactive UI can be created by switching colors, such as “gray frame + white filled star” for unregistered state, “yellow frame + yellow filled star” for registered state. Also, arranging round frame to “gold gradation” creates high-class medal-style design.

Related Keywords

Star, Circle, Round, Favorite, Bookmark, Important, Evaluation, Recommend, Button, UI, Mark, Icon